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

纯div+css实现列等高，左右div适应高度

2013-11-01 00:05 316 查看

首页说明我采用的是背景覆盖的方法，使左右都可以自适应高度
关键点是，外层容器的高度是由，非浮动的元素决定的，如本例中#leftbg的高度是由#right的高度决定的

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">
#rightbg{float:left;width:600px;background:#CCFFFF}
#leftbg{width:600px;background:#FFCC99}
#left{float:left;width:100px;background:#FFCC99}
#right{margin-left:100px;background:#CCFFFF}
</style>
</head>
<body>
<div id="rightbg">
<div id="leftbg">
<div id="left">1<br />1<br />1<br />1<br />1<br />1<br /><input type="button"  value="点我减高"/><input type="button"  value="点我加高"/></div>
<div id="right">1<br />1<br />1<br /><input type="button"  value="点我减高"/><input type="button"  value="点我加高"/></div>
</div>
</div>
</body>
<!--加高脚本-->
<script>
function add(div){
left = document.getElementById(div);
left.style.height=left.offsetHeight+10+"px";
}
function jian(div){
left = document.getElementById(div);
left.style.height=left.offsetHeight-10+"px";
}
</script>
</html>

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

标签：

相关文章推荐

新的分享

章节导航