<!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>