如何在CSS中將導航和內容區域高度拉伸至100％？

如果您轉到http://ffmages.com/final-fantasy-tactics（作爲示例），您會注意到頁腳部分顯示在導航區和內容區後面。我想使它的導航和內容在100％的高度上延伸，並且頁腳停留在屏幕的底部。如何在CSS中將導航和內容區域高度拉伸至100％？

以下是我使用的CSS我的頭，菜單，內容和頁腳部分：

#container { 
    width: 1000px; 
    height: 100%; 
    background-image: url(/images/background.gif); 
    margin: 0 auto; 
} 

#header { 
    width: 1000px; 
    height: 98px; 
    background-image: url(/images/header.jpg); 
    background-repeat: no-repeat; 
} 

#primary { 
    float: left; 
    width: 167px; 
    height: 798px; 
    text-align: left; 
    padding-bottom: 14px; 
    background-image: url(/images/nav-bg.jpg); 
    background-repeat: no-repeat; 
    background-color: #FFFFFF; 
    margin: 0px; 
    border-top: 1px #000000 solid; 
    border-left: 1px #000000 solid; 
    border-right: 1px #000000 solid; 
} 

#content { 
    float: right; 
    width: 810px; 
    height: 100%; 
    text-align: left; 
    background-color: #FFFFFF; 
    border-top: 1px #000000 solid; 
    border-right: 1px #000000 solid; 
    padding: 10px; 
    line-height: 1.5em; 
    margin: 0px; 
} 

#footer { 
    clear: both; 
    width: 998px; 
    height: 18px; 
    font-size: 7pt; 
    color: #FFFFFF; 
    text-align: center; 
    background-color: #07162A; 
    background-image: url(/images/footer-bg.jpg); 
    border-top: 1px #000000 solid; 
    border-left: 1px #000000 solid; 
    border-right: 1px #000000 solid; 
    border-bottom: 1px #000000 solid; 
    padding-top: 6px; 
    padding-bottom: 1px; 
}

任何幫助表示讚賞。謝謝！

來源

2012-07-20 Omar

什麼是你的HTML嗎？你可以做的jsfiddle？ – 2012-07-20 21:24:04

對不起，我不熟悉的jsfiddle。如何創建一個？ – Omar 2012-07-20 21:26:27

[JSFiddle.net]（HTTP ：//www.jsfiddle.net/）將你的HTML放在左上角，你的CSS放在右上角，然後點擊「運行」，右下角將顯示輸出，點擊「sa ve「併發布URL。 – 2012-07-20 21:43:57

很難說沒有看到一個div層次結構。

只是在這裏吐口水，但你可以設置div結構。

--------------------------------------------- 
|     HEADER     | 
--------------------------------------------- 
|  |         | 
|  |         | 
|  |         | 
| NAV |   BODY      | 
|  |         | 
|  |         | 
|  |         | 
--------------------------------------------- 
|     FOOTER     | 
---------------------------------------------

其中NAV實際包含在BODY內。當BODY或NAV垂直擴展時，FOOTER將被相應地推送。您必須使用邊距和填充以使頁腳與瀏覽器窗口的底部齊平。

來源

2012-07-20 21:26:31

所有你應該做的（基於給出的例子是應用兩種屬性，你的CSS

position: fixed; 
bottom: 0;

一旦這兩個應用頁腳應始終在頁面的底部，然而寬你設置它...在你的情況998px

來源

2012-07-20 21:29:11 Jared

這不是我想要做的。這段代碼使頁腳固定，當你滾動時，它停留在那裏。我只是想確保頁腳停留在頁面的底部。 – Omar 2012-07-20 21:35:10

@OmarHachem你想要它在頁面的底部，還是你想在它的內容下面？如果你想在頁面底部看到我的CSS變化。如果您只是希望它始終低於您的內容，請參閱jskiles1頁面佈局的說明。這將被排列爲...'

' – Jared 2012-07-21 18:27:50

如何在CSS中將導航和內容區域高度拉伸至100％？

回答

相關問題