html div三列布局佔滿全屏(左右兩列定寬或者百分比、中間自動適應,div在父div中居底)
div佈局:
<div> <div id="header"> 上 <div id="h_menu"> 上_底 </div> </div> <div id="middle"> <div class="left"> 中左 </div> <div class="right"> 中右 </div> <div class="center"> 中間 </div> </div> <div id="footer"> 下 </div> </div>
樣式:
<style type="text/css"> body, html { margin: 0px; } #header { background: blue; height: 100px; width: 100%; position:relative; /*父div的位置設定成相對的*/ } #h_menu { width:100%; height:50px; background:yellow; /*而子div的位置設定成絕對的,並且下邊緣設為0*/ position:absolute; bottom:0; } .left { width: 15%; /*這裡是百分比或者畫素值,對應下面的center就是百分比或者畫素值*/ height: 200px; background: red; float: left; } .right { width: 15%; /*這裡是百分比或者畫素值,對應下面的center就是百分比或者畫素值*/ height: 200px; background: pink; float: right; } .center { height: 200px; background: green; /*兩種方式均可(一)margin(二)margin-left、margin-right*/ /*(一)、用這種方式上面的left和right中的width是百分比或者畫素值都可以*/ margin: auto; /*(二)、這裡是百分比或者畫素值,對應上面的left、right中的width就是百分比或者畫素值*/ /*margin-left:15%; margin-right:15%;*/ } #footer { background: blue; height: 100px; width: 100%; } </style>
效果圖如下:
另一種實現方式(高度也佔滿全屏)
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <style type="text/css"> body, html { margin: 0px; } #header { background: blue; height: 100px; width: 100%; position: relative; /*父div的位置設定成相對的*/ top: 0; } #header #h_menu { position:absolute; bottom:0; background:yellow; width:100%; height:50px; } #middle { position:absolute; width:100%; height:auto; top: 100px; bottom:50px; } .left { width: 15%; /*這裡是百分比或者畫素值,對應下面的center就是百分比或者畫素值*/ background: red; float: left; height:100%; } .right { width: 15%; /*這裡是百分比或者畫素值,對應下面的center就是百分比或者畫素值*/ height: 100%; background: pink; float: right; } .center { height: 100%; background: green; /*兩種方式均可(一)margin(二)margin-left、margin-right*/ /*(一)、用這種方式上面的left和right中的width是百分比或者畫素值都可以*/ margin: auto; /*(二)、這裡是百分比或者畫素值,對應上面的left、right中的width就是百分比或者畫素值*/ /*margin-left:15%; margin-right:15%;*/ } #footer { background: blue; height: 50px; width: 100%; position: absolute; bottom: 0; } </style> </head> <body> <form id="form1" runat="server"> <div> <div id="header"> 上 <div id="h_menu"> 上_底 </div> </div> <div id="middle"> <div class="left"> 中左 </div> <div class="right"> 中右 </div> <div class="center"> 中間 </div> </div> <div id="footer"> 下 </div> </div> </form> </body> </html>
截圖如下: