1. 程式人生 > >html div三列布局佔滿全屏(左右兩列定寬或者百分比、中間自動適應,div在父div中居底)

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>

截圖如下: