页面布局方案-上固定，下自适应
Posted ryanchancrj
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了页面布局方案-上固定，下自适应相关的知识，希望对你有一定的参考价值。
上固定，下自适应
两行布局，上固定，下自适应
效果：
代码：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>上边固定，下面自适应</title> 5 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 6 <style type="text/css"> 7 html{ 8 padding-top:50px; /*上部设置为50px*/ 9 -webkit-box-sizing: border-box; 10 -moz-box-sizing: border-box; 11 box-sizing: border-box; 12 overflow:hidden; 13 } 14 html,body{ 15 margin:0; 16 height: 100%; 17 width:100%; 18 } 19 .top{ 20 width:100%; 21 height:50px; /*高度和padding设置一样*/ 22 margin-top: -50px; /*值和padding设置一样*/ 23 background-color: #ff6600; 24 overflow: auto; 25 position:relative; 26 } 27 .main{ 28 height: 100%; 29 width:100%; 30 overflow: auto; 31 background-color: #FFE69F; 32 } 33 </style> 34 </head> 35 <body> 36 <div class="top"> 37 <p> 此布局仅适用于在body内布局 top 高度50px </p> 38 </div> 39 40 <div class="main"> 41 <h3>下面自适应,此布局仅适用于在body内布局,main 高度自适应 </h3> 42 </div> 43 </body> 44 </html>
以上是关于页面布局方案-上固定，下自适应的主要内容，如果未能解决你的问题，请参考以下文章