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