现在很多网页的布局是左边是导航，右边是正文，这样看起来简单、大方，我们公司的网站就是这样设计的，有两种错误的布局如下：
图一和图二两种都是错误的情况，图一没有给左边导航设置高度，图二给左边设置了高度为屏幕的高度，当出现滚动条的时候，显示的也很丑。
正确的情况应该是，左边和右边的高度总是相等
代码如下：
<div class="container"> <div class="left"> <div>1导航</div> <div>2导航</div> <div>3导航</div> <div>4导航</div> </div> <div class="right"> <div>sss</div> <div>test</div> <div>test</div> <div>test</div> </div> </div> <style> body { margin: 0; padding: 0; text-align: center; } .container { overflow: hidden; } .left { width: 20%; float: left; background-color: #e2e2e2; min-height: 100%; margin-bottom: -99999px; padding: 0 0 99999px; } .left div { border-bottom: 1px solid #ccc; color: #6f6f6f; display: block; padding: 20px 2px; text-decoration: none; } .right { width: 80%; float: left; } .right div { height: 100px; background-color: #ddd; } </style>
或者需要左边导航高度最少为屏幕的高度，只要给导航设置最小高度为100%，前提是它父亲的高度为100%；
代码如下
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <div class="container"> <div class="left"> <div>1导航</div> <div>2导航</div> <div>3导航</div> <div>4导航</div> </div> <div class="right"> <div>sss</div> <div>test</div> <div>test</div> <div>test</div> </div> <div></div> </div> </body> <style> html, body { margin: 0; padding: 0; text-align: center; height: 100%; } .container { overflow: hidden; height: 100%; } .left { width: 20%; float: left; background-color: #e2e2e2; min-height: 100%; margin-bottom: -99999px; padding: 0 0 99999px; } .left div { border-bottom: 1px solid #ccc; color: #6f6f6f; display: block; padding: 20px 2px; text-decoration: none; } .right { width: 80%; float: left; } .right div { height: 100px; background-color: #ddd; } </style> </html>