左边div固定宽度，右边div宽度自适应；上边div高度固定，下面div高度自适应；效果如下：
left宽度固定150px；右边宽度自适应浏览器。right-top高度100px，right-bottom高度自适应浏览器。代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="en">
<style>
html,body{width: 100%;height: 100%;padding: 0;margin:0;}
#content{height: 100%;width: 100%;display: table;}
.left{background-color: #99B898;width: 150px;height:100%;position: relative;top:0;left: 0;display: table-cell;}
.right{position: relative;display: table-cell;}
.right-top{background-color: #FECEAB;height: 100px;position: absolute;top:0;left: 0;width: 100%}
.right-bottom{position: absolute;top:100px;left: 0;bottom:0;width: 100%;background-color: #FF847C}
</style>
</head>
<body>
<div id="content">
<div class="left">left</div>
<div class="right">
<div class="right-top">right-top</div>
<div class="right-bottom">right-bottom</div>
</div>
</div>
</body>
</html>上面代码在IE里，实现上下自适应的时候有问题；right-bottom高度没有自适应浏览器。用jquery处理了一下：
$(".right-bottom").height($("#content").height()-$(".right-top").height())
扫一扫
1277
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
