<style type="text/css">
body,html{ margin:0; height:100%;/*这里将高度设置为100%是这个布局实现自适应高度的关键，只有这里设置了高度，下面div的高度设置才起作用*/
} .head{ width: 100%; height: 50px; background-color: red; }#middle{
height: 100%; }.f1{
float: left; width: 50px; height: 100%; background-color: green; } .f2{ float: left; height: 100%; width: 100px; background-color: blue; } </style> <body> <div class="head"></div> <div id="middle"> <div class="f1"></div> <div class="f2"></div> </div></body>