根據頁眉和頁腳高度更改高度的動態內容

我試圖製作包含3個元素的頁面：頁眉，頁腳和內容。正如名字所暗示的那樣，我希望標題固定在頂部，頁腳在底部，而內容在兩者之間。我已經做了一個佈局，將頁眉和頁腳放在應該放置的位置，但是內容要麼與它們重疊，要麼反過來，內容應該變小。根據頁眉和頁腳高度更改高度的動態內容

我的問題是，頁眉和頁腳將用於許多不同的事情，因此他們是動態的，當談到高度。

有沒有什麼辦法讓內容填充頁眉和頁腳之間剩下的空間，而不會重疊其中的任何一個？

如果可能，我寧願純粹的CSS，但如果這是不可能的，我也想要一個JavaScript的建議。 :)

謝謝！

編輯：這是我得到的atm。

<div class="container"> 
    <div id="header"></div> 
    <div id="footer"></div> 
    <div id="content"></div> 
</div>

CSS：

#content { 
    position:absolute; 
    background: url('img/textures/fabric.png'); 
    background-color: gray; 
    height:auto; 
    width:auto; 
    margin:0 auto 0 48px; /* Center content */ 
    left:0; 
    right:0; 
    top:0; 
    bottom:0; 
    text-align:center; 
} 

#dashtop { 
    position:fixed; 
    width:auto; 
    background-color:aqua; 
    opacity: .5; 
    margin-left: 48px; 
    top:0; 
    left:0; 
    right:0; 
    text-align:center; 
} 

#footer { 
    position: fixed; 
    margin-left: 48px; 
    background-color:green; 
    bottom:0; 
    right:0; 
    left:0; 
    width:auto; 
    height:auto; 
    text-align:center; 
    opacity:0.5; 
    z-index:0;

}

來源

2012-08-22 Martin

這應該已經是默認行爲。刪除所有高度屬性，並查看結果是否是你想要的。並且不要使用絕對定位。 – JohnB

您的意思是說，您希望爲每個頁面設置一個固定的總高度，並且您希望頁眉和頁腳較大時頁面的內容縮小 - 例如。。。。 contentheight = fixedpageheight-headerheight-footerheight？ – DaveR

此外，你已經做了已經是有用的！ – DaveR

使用相對定位兩者的標頭和內容（無位置屬性），並使用固定定位爲頁腳。

來源

2012-08-22 09:40:30 JohnB

好吧，實際上它做到了..也許。 :) 現在我的問題是，內容不填滿頁眉和頁腳之間的空間，但只涵蓋了內部的內容。 – Martin

現在看起來像這樣：http://postimage.org/image/mb94vx5sn/ Aqua = Header Gray = Content（應該一直擴展到頁腳） Green =頁腳忽略紅色，這只是另一個酒吧，但它已經按照預期工作，並且不會干擾其他人。 – Martin

這可能有所幫助：http://stackoverflow.com/questions/2297453/get-css-div-to-fill-available-height – JohnB

根據頁眉和頁腳高度更改高度的動態內容

回答

相關問題