1. 程式人生 > >html自適應頁面上下左右分欄的處理技巧

html自適應頁面上下左右分欄的處理技巧

html自適應頁面上下左右分欄的效果可以借用CSS或者jQuery進行處理。

CSS中的width和height屬性的值帶%的情況:

height:100% 代表基於包含它的塊級物件(即父元素)的百分比高度,此時為100%。

width:100% 代表基於包含它的塊級物件(即父元素)的百分比寬度,此時為100%。

使某元素(例如id為container的元素)佔據整個頁面的全部時的CSS程式碼如下:

#container {
    width: 100%;
    height: 100%;
}

簡單的帶有的頭注和腳註頁面例項:

<html>
    <head>
        <style>
            html,body {margin:0;padding:0;
            }
            #mainContainer {
                height:100%;
                width:100%;
            }
            #header {
                height:15%;
                width:100%;
                background-color:red;
            }
            #center {
                height:75%;
                width:100%;
                background-color:blue;
            }
            #footer {
                height:10%;
                width:100%;
                background-color:pink;
            }
        </style>
    </head>
    <body>
        <div id="mainContainer">
            <div id="header">Header</div>
            <div id="center">Center</div>
            <div id="footer">Footer</div>
        </div>
    </body>
</html>

假如當一個父元素中有兩個或多個元素時,需要其中一個元素佔據除其他元素所佔的空間之外剩下的所有空間,則可以在頁面初始化後通過jQuery修改它的高度和寬度屬性。

例如,其他元素總共佔父元素高70畫素、寬25畫素的空間且都在一成片區域,父元素寬也為25畫素。

// 頁面初始化後呼叫
$(document).ready(function () {
    // 使視窗最大化
    if (document.body.offsetWidth < screen.width) {
        try {
            window.moveTo(0, 0);
            window.resizeTo(window.screen.availWidth, window.screen.availHeight);
        } catch (e) {
            throw e;
        }
    }
    // 使mainContent的高度為父元素的全部高度減去70畫素的高度
    $(".mainContent").css('height', '100%').css('height', '-=70px');
    // 使mainContent的寬度為父元素的全部寬度減去25畫素的寬度
    $(".mainContent").css('width', '100%').css('width', '-=25px');
});

參考自:css width: calc(100% -100px); alternative using jquery  http://stackoverflow.com/questions/11117216/css-width-calc100-100px-alternative-using-jquery