CSS两列高度自适应，右边自适应
程序员文章站
2022-05-01 11:34:39
...
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS两列高度自适应，右边自适应</title>
<style>
html,body{
width:100%;
height:100%;
}
body,div{
margin:0;
padding:0;
}
/* 这里之所以给margin-150px是为了减轻底部盒子的高度，不然盒子100%了 */
#box{
width:100%;
height:100%;
margin-top:-150px;
}
/* 浮动 */
#box .left{
float:left;
width:300px;
height:100%;
margin-right:10px;
background-color:red;
}
/* 利用前面的盒子浮动不占据位置，然后在通过overflow：hidden将两个盒子独立出来。 */
#box .right{
overflow:hidden;
height:100%;
background-color:pink;
}
#footer{
position:absolute;
bottom:0;
left:0;
width:100%;
height:150px;
background-color:#ccc;
}
</style>
</head>
<body>
<div id="box">
<div class="left"></div>
<div class="right"></div>
</div>
<div id="footer"></div>
</body>
</html>
上一篇： 监听器（Listener）