<style type="text/css"> *{ margin:0; padding:0; } body, html { 100%; height:100%; overflow:hidden; } .header { background: #C9F; 100%; height: 90px; overflow: hidden; position: absolute; top: 0; } .content { position:absolute; top:90px; bottom:32px; 100%; overflow:hidden; height:100%; } .main { height:100%; background:#66CCFF; overflow-y:auto; text-align:center; } .footer { background: #9CF; 100%; height: 40px; position: absolute; bottom: 0; left: 0; } </style> </head> <body> <!-- 代码 开始 --> <div class="header"> <br />这里是顶部 </div> <div class="content"> <div class="main"> 网页header和footer高度是固定的,中间的content高度自适应浏览器窗口高度,随着窗口的大小变动都是满屏的。 </div> </div> <div class="footer"> 这里是底部 </div> <!-- 代码 结束 --> </body>