您的位置：首页 > Web前端 > CSS

css左右上下布局

2016-09-29 14:24 453 查看

左边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())

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： css布局布局

相关文章推荐

新的分享

章节导航