后台页面布局
一、fixed布局
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <!--对body标签执行CSS样式操作 --> <style> body{ margin:0; } .pg-header{ height:48px; background-color:#2459a2; color:white; } .left{ float:left; } .right{ float:right; } .pg-content .menu{ position:fixed; top:48px; left:0; bottom:0; width:200px; background-color:#dddddd; } .pg-content .content{ position:fixed; top:48px; right:0; bottom:0; left:200px; background-color:pink; overflow:auto; } </style> <!-- 上面overflow是滚动条，当内容超过页面的高度之后，定义overflow会出现滚动条，让能够拉动看到下面的内容 --> <!-- 最小宽度，当比例小于最小宽度失效，执行最小宽度 --> <!-- 另外一个移动的边框会受到影响，会出现什么情况 --> </head> <body> <div class="pg-header"></div> <div class="pg-content"> <div class="menu left">a</div> <div class="content left"> <p>alex</p><p>sb</p><p>alex</p><p>sb</p><p>alex</p><p>sb</p><p>alex</p><p>sb</p><p>alex</p><p>sb</p><p>alex</p><p>sb</p> <p>alex</p><p>sb</p><p>alex</p><p>sb</p><p>alex</p><p>sb</p><p>alex</p><p>sb</p><p>alex</p><p>sb</p><p>alex</p><p>sb</p> <p>alex</p><p>sb</p><p>alex</p><p>sb</p><p>alex</p><p>sb</p><p>alex</p><p>sb</p><p>alex</p><p>sb</p><p>alex</p><p>sb</p> <p>alex</p><p>sb</p><p>alex</p><p>sb</p><p>alex</p><p>sb</p><p>alex</p><p>sb</p><p>alex</p><p>sb</p><p>alex</p><p>sb</p> <p>alex</p><p>sb</p><p>alex</p><p>sb</p><p>alex</p><p>sb</p><p>alex</p><p>sb</p> </div> </div> <div class="pg-footer"></div> </body> </html>
原文：http://www.cnblogs.com/gengcx/p/7631304.html