首页手记 IE8(低版本)下，父元素的高度不能随子元素高度变化而...

IE8(低版本)下，父元素的高度不能随子元素高度变化而变化的问题解决

标签：

Html/CSS JQuery

页面的布局为两列，其中一列点击某个元素会显示内容或隐藏内容，高度不断变化,两列中的内容要始终保持相对垂直居中，父元素的高度要保持自动适应。最终采用display:table;display:table-cell;vertical-align:middle;来解决自适应的问题。具体实例代码如下：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/DTD/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
*{
    margin: 0;
    padding: 0;
}
.section{
    display: table;
    width:1000px;
    margin: 10px auto;
    padding: 15px 0;
    text-align: center;
    color:#fff;
}
.left,.right{
    display: table-cell;
    vertical-align: middle;
    padding:10px 0;
}
.left{
    width:280px;
    background:#000;
}
.right{
    width:720px;
    background:#f00;
}
.content{
    display:none;
    margin-top:10px;
}
</style>
</head>
<body>
<div class="section">
    <div class="left">导航内容</div>
    <div class="right">
        <input type="button" id="btn" value="点击显示内容"/>
        <div class="content">
            无论内容显示还是隐藏，两列布局始终垂直居中
        </div>
     </div>
</div>

<script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script>
$(function(){
    $("#btn").click(function(){
        $(".content").toggle(function(){
            $("#btn").val("点击隐藏内容");
        },function(){
            $("#btn").val("点击显示内容");
        });
    });
});
</script>
</body>
</html>

点击查看更多内容