在HTML中利用CSS設(shè)計(jì)多欄高度自適應(yīng)頁面

方法一：偽列布局法（利用背景圖）

所謂偽列布局法，就是設(shè)計(jì)一個(gè)背景圖像，利用背景圖像來模擬欄目的背景。如，使用Photoshop設(shè)計(jì)一個(gè)長方形的背景圖，長度與頁面寬度保持一致，高度任意。
代碼中要用到的背景圖：


bg.gif（代碼中背景圖 800*77）
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>設(shè)計(jì)多欄高度自適應(yīng)頁面_偽列布局法</title>
<style type="text/css">
* {
    margin: 0;
    padding: 0;
}
body { text-align: center; }
#model {
    width: 800px;
    margin-left: auto;
    margin-right: auto;
    text-align: left;
}
#header { background: #FF00FF; }
#main {
    position: relative;
    width: 100%;
    background: url(images/bg.gif) center repeat-y
}
#content {
    margin-left: 25%;
    margin-right: 20%;
}
#subplot {
    width: 20%;
    position: absolute;
    right: 0;
    top: 0;
}
#serve {
    width: 25%;
    position: absolute;
    left: 0;
    top: 0;
}
#footer { 
    background: #FF99FF; 
    }
</style>
<script type="text/javascript" language="javascript">
    /*解決#subplot #serve 因絕對定位脫離文檔流，使#mian包含框的高度就為#content的高
     度，此腳本會(huì)使#mian的高度為三個(gè)子欄最高的一欄的高度
     即#serve的高度；*/
window.onload = function(){
    var main = document.getElementById("main");
    // 定義即將控制的外框div
    var left = document.getElementById("subplot").offsetHeight;
    // 獲得內(nèi)部三欄中ID = subplo的div高度
    var right = document.getElementById("serve").offsetHeight;
    // 獲得內(nèi)部三欄中ID = serve的div高度
    var middle = document.getElementById("content").offsetHeight;
    // 獲得內(nèi)部三欄中ID = content的div高度
    var height = 0;
    // 定義變量來儲(chǔ)存最大值
    height = left - right > 0 ? left : right;
    // 數(shù)值比較
    height = middle - height > 0 ? middle : height;
    // 數(shù)值比較
    main.style.height = height + "px";
    // 設(shè)定外框div的高度為 得出的最大高度
}
</script>
</head>

<body>
<div id="model">
    <div id="header">
        <h1>網(wǎng)頁標(biāo)題</h1>
        <h2>網(wǎng)頁副標(biāo)題</h2>
    </div>
    <div id="main">
        <div id="content">
            <h3>主信息區(qū)域</h3>
            <p>正文內(nèi)容</p>
            <p>正文內(nèi)容</p>
        </div>
        <div id="subplot">
            <h3>次信息區(qū)域</h3>
            <p>正文內(nèi)容</p>
        </div>
        <div id="serve">
            <dl>
                <dt>功能服務(wù)區(qū)域</dt>
                <dd>服務(wù)列表項(xiàng)</dd>
                <dd>服務(wù)列表項(xiàng)</dd>
                <dd>服務(wù)列表項(xiàng)</dd>
                <dd>服務(wù)列表項(xiàng)</dd>
                <dd>服務(wù)列表項(xiàng)</dd>
                <dd>服務(wù)列表項(xiàng)</dd>
                <dd>服務(wù)列表項(xiàng)</dd>
                <dd>服務(wù)列表項(xiàng)</dd>
            </dl>
        </div>
    </div>
    <div id="footer">
         <p>版權(quán)信息區(qū)域</p>
    </div>
</div>
</body>
</html>

瀏覽器效果截圖：
偽列布局.png

提示：在使用這種方法時(shí)，一定要確保頁面寬度是固定的且與背景圖的寬度一只，不能夠設(shè)計(jì)為彈性頁面（百分比寬度），或?qū)挾戎禐閍uto；

方法二：補(bǔ)白padding邊界margin重疊法

這種設(shè)計(jì)方法的思想是設(shè)計(jì)三列欄目的底部不帶為無窮大，這樣在有限的窗口內(nèi)都能夠顯示欄目的背景色，因此也就不用擔(dān)心欄目高度無法自適應(yīng)。然后為了避免補(bǔ)白過大產(chǎn)生的空白區(qū)域，在設(shè)計(jì)底部邊界為負(fù)無窮大，從而覆蓋掉多出來的補(bǔ)白區(qū)域，最后再在中間行包含框中定義overflow:hidden;聲明剪切到多出的區(qū)域即可。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>設(shè)計(jì)多欄高度自適應(yīng)頁面_補(bǔ)白邊界重疊法</title>
<style type="text/css">
* {
    margin: 0;
    padding: 0;
}
body { text-align: center; }
#model {
    width: 800px;
    margin-left: auto;
    margin-right: auto;
    text-align: left;
}
#header { background: #FF00FF; }
#main {
    position: relative;
    width: 100%;
    border:1px solid black;
    overflow:hidden;/*在父元素添加 溢出隱藏 就可以隱藏超出的背景圖了*/
}
#content { /*此包含框會(huì)隨著內(nèi)容的增加而增加*/
    margin-left: 25%;
    margin-right: 20%;
    padding-bottom: 9999px;
    margin-bottom: -9999px;
    background:#fc0;
}
#subplot {/*此包含框雖然也會(huì)隨著內(nèi)容的增加而增加，但因?yàn)槎x了絕對定位，脫離了文檔流，所以高度的增加不會(huì)影響父元素的高度，
所以看不到效果。但父元素設(shè) 置 overflow：hidden；后可以對所有超出父元素的子元素進(jìn)行隱藏（不管是否脫離文檔流）*/
    width: 20%;
    position: absolute;
    right: 0;
    top: 0;
    border:1px solid red;
    padding-bottom: 9999px;
    margin-bottom: -9999px;
    background:#0cc;
}
#serve {/*此包含框雖然也會(huì)隨著內(nèi)容的增加而增加，但因?yàn)槎x了絕對定位，脫離了文檔流，所以高度的增加不會(huì)影響父元素的高度，
所以看不到效果。但父元素設(shè)置 overflow：hidden；后可以對所有超出父元素的子元素進(jìn)行隱藏（不管是否脫離文檔流）*/
    width: 25%;
    position: absolute;
    left: 0;
    top: 0;
    border:1px solid green;
    padding-bottom: 9999px;
    margin-bottom: -9999px;
    background:#9cf;
}
#footer { 
    background: #FF99FF; 
    }
</style>
</head>

<body>
<div id="model">
    <div id="header">
        <h1>網(wǎng)頁標(biāo)題</h1>
        <h2>網(wǎng)頁副標(biāo)題</h2>
    </div>
    <div id="main">
        <div id="content">
            <h3>主信息區(qū)域</h3>
            <p>正文內(nèi)容</p>
            <p>正文內(nèi)容</p>
            <p>正文內(nèi)容</p>
            <p>正文內(nèi)容</p>
            <p>正文內(nèi)容</p>
            <p>正文內(nèi)容</p>
            <p>正文內(nèi)容</p>
        </div>
        <div id="subplot">
            <h3>次信息區(qū)域</h3>
            <p>正文內(nèi)容</p>
        </div>
        <div id="serve">
            <dl>
                <dt>功能服務(wù)區(qū)域</dt>
                <dd>服務(wù)列表項(xiàng)</dd>
                <dd>服務(wù)列表項(xiàng)</dd>
                <dd>服務(wù)列表項(xiàng)</dd>
                <dd>服務(wù)列表項(xiàng)</dd>
                <dd>服務(wù)列表項(xiàng)</dd>
                <dd>服務(wù)列表項(xiàng)</dd>
                <dd>服務(wù)列表項(xiàng)</dd>
                <dd>服務(wù)列表項(xiàng)</dd>
            </dl>
        </div>
    </div>
    <div id="footer">
         <p>版權(quán)信息區(qū)域</p>
    </div>
</div>
</body>
</html>

瀏覽器效果截圖：


邊界補(bǔ)白重疊法.png

但是這種方法只能夠根據(jù)中間欄目的高度來裁切，也就是說overflow:hidden;聲明對于流動(dòng)或浮動(dòng)元素有效，對于脫離文檔流的絕對定位元素來說無法進(jìn)行裁切，從而導(dǎo)致如果絕對定位的欄目高度高出中間流動(dòng)布局欄目的高度時(shí)，就會(huì)被裁切掉。
為了避免此類問題發(fā)生，不能使用定位法布局頁面，應(yīng)用簡單的浮動(dòng)發(fā)進(jìn)行設(shè)計(jì)，改動(dòng)的核心樣式如下（方法三），這樣就可以實(shí)現(xiàn)上述3列自適應(yīng)高度的版式效果。

方法三(絕對定位改浮動(dòng))：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>設(shè)計(jì)多欄高度自適應(yīng)頁面_補(bǔ)白邊界重疊法_絕對定位改浮動(dòng)</title>
<style type="text/css">
* {
    margin:0;
    padding:0;
}
body { text-align:center; }
#model {
    width:800px;
    margin-left:auto;
    margin-right:auto;
    text-align:left;
}
#header { background:#FF00FF; }
#main {
    position:relative;
    width:100%;
    overflow:hidden
}
#content {
    float:left;
    width:55%;
    background:#FFCC00;
}
#subplot {
    width:20%;
    float:left;
    background:#00CCCC;
}
#serve {
    width:25%;
    float:right;
    background:#99CCFF;
}
#content, #subplot, #serve {
    padding-bottom: 9999px;
    margin-bottom: -9999px;
}
#footer { background:#FF99FF; }
</style>
</head>
<body>
<div id="model">
    <div id="header">
        <h1>網(wǎng)頁標(biāo)題</h1>
        <h2>網(wǎng)頁副標(biāo)題</h2>
    </div>
    <div id="main">
        <div id="content">
            <h3>主信息區(qū)域</h3>
            <p>正文內(nèi)容</p>
            <p>正文內(nèi)容</p>
        </div>
        <div id="subplot">
            <h3>次信息區(qū)域</h3>
            <p>正文內(nèi)容</p>
        </div>
        <div id="serve">
            <dl>
                <dt>功能服務(wù)區(qū)域</dt>
                <dd>服務(wù)列表項(xiàng)</dd>
                <dd>服務(wù)列表項(xiàng)</dd>
                <dd>服務(wù)列表項(xiàng)</dd>
                <dd>服務(wù)列表項(xiàng)</dd>
                <dd>服務(wù)列表項(xiàng)</dd>
                <dd>服務(wù)列表項(xiàng)</dd>
                <dd>服務(wù)列表項(xiàng)</dd>
                <dd>服務(wù)列表項(xiàng)</dd>
            </dl>
        </div>
    </div>
    <div id="footer">
        <p>版權(quán)信息區(qū)域</p>
    </div>
</div>
</body>
</html>

瀏覽器效果圖：

絕對定位改浮動(dòng).png

聲明：此文只代表個(gè)人見解，只供參考！聯(lián)系QQ：1522025433

最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡書系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • 問答題47 /72 常見瀏覽器兼容性問題與解決方案？ 參考答案 (1)瀏覽器兼容問題一：不同瀏覽器的標(biāo)簽?zāi)J(rèn)的外補(bǔ)...
    _Yfling閱讀 14,093評論 1贊 92
  • CSS中的float屬性簡介 幾乎所有會(huì)WEB前端開發(fā)的同學(xué)都知道CSS中有一個(gè)float屬性用于實(shí)現(xiàn)HTML元素...
    歐陽大哥2013閱讀 2,997評論 5贊 26
  • 定義瀏覽器對于技術(shù)支持的標(biāo)準(zhǔn)不同造成兼容性的差異 兼容不同類型瀏覽器的基本方法 解決瀏覽器兼容問題的方法，這些方法...
    簡不簡單_都好閱讀 676評論 0贊 2
  • 選擇qi：是表達(dá)式 標(biāo)簽選擇器 類選擇器 屬性選擇器 繼承屬性： color，font，text－align，li...
    love2013閱讀 2,422評論 0贊 11
  • 林丹出軌了！ 一大早「名偵探趙五兒」微博爆料「超級丹」林丹在太太謝杏芳孕期出軌長腿嫩妹，親熱、擁抱、掐屁股，加上充...
    太虛見閱讀 2,170評論 0贊 0

友情鏈接更多精彩內(nèi)容