CSS - 設置Div的大小以填充剩餘空間

我是新來的CSS和im tryig來創建模板的準系統結構。CSS - 設置Div的大小以填充剩餘空間

我有一個div的標題，主要內容&頁腳。我的頁腳&頭很好，但我需要主內容div來「填充」頁眉&頁腳之間的剩餘空間。我已經嘗試將padding-bottom屬性設置爲與頁腳相同的高度，但它並未關閉與頁腳的間距，只是將div的高度設置爲填充底部值。

我的HTML

<!DOCTYPE html> 
<HTML> 
    <HEAD> 

     <LINK type="text/css" rel="stylesheet" href="main.css"/> 
     <TITLE>Template</TITLE> 

    </HEAD> 
    <BODY> 
     <div id="container"> 

      <div class="header"></div> 

      <div class="main-content"></div> 

      <div class="footer"></div> 

     </div> 
    </BODY> 
</HTML>

而且層疊樣式表。

#container{ 

    min-height:100%; 
    position:relative; 

} 

.header{ 

    border:2px dashed blue; 
    height:150px; 
    border-radius:5px; 
    padding:10px; 
} 


.main-content{ 


    border:2px dashed blue; 
    border-radius:5px; 
    padding:10px; 
    padding-bottom:100px; 



} 

.footer{ 
    position:absolute; 
    bottom:0; 
    width:100%; 
    height:100px; 
    border:2px dashed blue; 
    border-radius:5px; 




} 

html, body{ 
    margin:0; 
    padding:1px; 
    height:100%; 
}

來源

2014-04-27 Derek

您可以使用calc()您.main-content

.main-content { 
    border:2px dashed blue; 
    border-radius:5px; 
    padding:10px; 
    height: calc(100% - 300px);  
}

Demo

另外，我在這裏和那裏已經調整了幾件事情，例如，你將不再需要padding-bottom了，而不是使用min-height: 100%;你應該使用height: 100%;，並且不要使用大寫 - 小寫標籤，保持寫作的習慣只有小寫字母的標籤。

來源

2014-04-27 09:17:55

非常感謝您的幫助，我是服務器端開發人員將我的腳趾傾斜在線上，我很欣賞這個建議。 – Derek

CSS - 設置Div的大小以填充剩餘空間

回答

相關問題