1.两边固定 当中自适应
2.当中列要完整显示
3.当中列要优先加载
浮动: 搭建完整的布局框架
margin 为赋值:调整旁边两列的位置(使三列布局到一行上)
使用相对定位:调整旁边两列的位置(使两列位置调整到两头)
!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> *{ margin: 0; padding: 0; } body{ min- 600px; } #content{ padding: 0 200px; } #header,#footer{ height: 20px; text-align: center; border: 1px solid deeppink; background: gray; } #content .middle{ float: left; 100%; background: pink; /*padding: 0 200px;*/ } #content .left{ position: relative; left: -200px; margin-left: -100%; float: left; 200px; background: yellow; } #content .right{ position: relative; right: -200px; margin-left: -200px; float: left; 200px; background: yellow; } .clearfix{ *zoom: 1; } .clearfix:after{ content: ""; display: block; clear: both; } </style> </head> <body> <div id="header">header</div> <div id="content" class="clearfix"> <div class="middle"> <h4>middle</h4> <!--<h4>middle</h4> <h4>middle</h4> <h4>middle</h4> <h4>middle</h4> <h4>middle</h4> <h4>middle</h4> <h4>middle</h4> <h4>middle</h4> <h4>middle</h4> <h4>middle</h4> <h4>middle</h4> <h4>middle</h4> <h4>middle</h4> <h4>middle</h4> <h4>middle</h4> <h4>middle</h4> <h4>middle</h4> <h4>middle</h4> <h4>middle</h4> <h4>middle</h4> <h4>middle</h4>--> </div> <div class="left">left</div> <div class="right">right</div> </div> <div id="footer">footer</div> </body> </html>
---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
中间加入无限增高
<!--
1.两边固定 当中自适应
2.当中列要完整显示
3.当中列要优先加载
-->
<!--
浮动: 搭建完整的布局框架
margin 为赋值:调整旁边两列的位置(使三列布局到一行上)
使用相对定位:调整旁边两列的位置(使两列位置调整到两头)
-->
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>圣杯布局</title> <style type="text/css"> *{ margin:0; padding:0; } body{ min-600px; } #content{ overflow: hidden; padding: 0 200px; } #header, #footer{ height: 20px; text-align: center; border: 1px solid deeppink; background: gray; } #content .middle, #content .left, #content .right{ padding-bottom: 10000px; margin-bottom:-10000px; } #content .middle{ float: left; 100%; background: pink; /*padding: 0 200px;*/ } #content .left{ background: yellow; position: relative; float: left; 200px; /*100%提升一层*/ margin-left: -100%; /*根据父级左右padding 200px; 让他据左边 */ left:-200px; } #content .right { background:yellow; position: relative; float: left; 200px; /*-200px提升一层*/ margin-left: -200px; right: -200px; } .clearfix{ zoom: 1; } .clearfix:after{ content:""; display: block; clear:both; } </style> </head> <body> <div id="header">header</div> <div id="content" class="clearfix"> <div class="middle"> <h4>middle</h4> <h4>middle</h4> <h4>middle</h4> <h4>middle</h4> <h4>middle</h4> <h4>middle</h4> <h4>middle</h4> <h4>middle</h4> </div> <div class="left">left</div> <div class="right">right</div> </div> <div id="footer">footer</div> </body> </html>