如何使此內容div可用高度的100％？

//// html ////

<body> 
    <div class="page"> 
     <div class="menu"> menu </div> 
     <div class="content"> {% block content %}{% endblock %}</div> 
     <div class="footer"> footer </div> 
    </div> 
</body> 


//// css ////

html, body { 
background: black; 
height: 100%; 
margin: 0; 

} 

.page { 
min-height: 100%; 
position: relative; 
} 

.menu { 
background: #ff0000; 
height: 100px; 
} 

.content { 
padding-bottom: 75px; 
background: #00ff00; 
} 

.footer { 
position: absolute; 
width: 100%; 
bottom: 0; 
height: 75px; 
background: #0000ff; 
}

輸出：如何使此內容div可用高度的100％？

enter image description here

我給你一個鏈接的jsfiddle但它不能正常工作（不一樣，在我的瀏覽器） - http://jsfiddle.net/t3Gjx/3/ 無論綠地（內容領域）的內容有多長，我都需要擺脫黑洞。我試着用

min-height = 100%

in .content但沒有成功。

來源

2013-07-15 tmq

你想頁眉和頁腳有一個固定的位置，還是應該內容夠吃嗎？ – LinkinTED

如果您試圖獲取綠色背景以覆蓋整個內容，則只需設置正文的背景顏色並將內容保留爲透明背景即可。像這樣：http://jsfiddle.net/3CCDD/ – cowcowmoomoo

@LinkinTED頁眉和頁腳已經處於固定位置，所以我需要擴展內容。 – tmq

你可以做這樣的事情：

http://jsfiddle.net/t3Gjx/10/

html, body { 
    background: black; 
    height: 100%; 

} 

.page { 
    min-height: 100%; 
    height: 100%; 
    margin: 0 auto -75px; /* the bottom margin is the negative value of the footer's height */ 
} 

.menu { 
    background: #ff0000; 
    height: 100px; 
    position: relative; 
    z-index: 555; 
} 

.content { 
    background: #00ff00; 
    margin: -100px 0 -75px; 
    min-height: 100%; 
    height: auto !important; 
    height: 100%; 
} 

.content:before { 
    content: ""; 
    display: block; 
    height: 100px; 
    width: 100%; 
} 

.content:after { 
    content: ""; 
    display: block; 
    height: 75px; 
    width: 100%; 
} 

.footer { 
    width: 100%; 
    height: 75px; 
    background: #0000ff; 
}

說明：

這使用本概述的技術：http://ryanfait.com/resources/footer-stick-to-bottom-of-page/

你做。第100 ％的高度，併爲頁腳設置底部的負邊距陷入。這確保該網站的高度不是100％+頁腳的高度。內容使用之前和之後的塊，加上負邊距使其本身的高度爲100％，減去菜單和頁腳。

來源

2013-07-15 15:03:14 Axel

謝謝！在'html，body {...}'中使用'margin：0;'它的運行完全按照計劃進行:) – tmq

@Axel，是否有任何瀏覽器與我的100％身高解決方案相抗衡，您可能知道？感謝您的工作。 – blackhawk

@Axel，難以添加像這個例子中的另一個div（黑色字段）[link]（http://jsfiddle.net/t3Gjx/13/）（我剛剛在'.content中改變了'width：' '到80％以顯示問題出在哪裏）。我試圖通過在'.content'和'float：right'中添加'clear：both;'將'.footer'和'float：left'添加到'right-div'，但這種解決方案不起作用 – tmq

EDIT3我對所有的編輯表示歉意。最後編輯@ Axel的jsfiddle。這工作最好的我認爲： http://codepen.io/k/pen/qJwez。

我加 position:relative; z-index: 999;到頁腳和

z-index: 998;的內容和

margin:0爲HTML，身體。

並將頁腳移動到html中的頁面元素中。

關於@Axel的回答：如果你有很多內容，它會溢出頁腳。我說這個他http://jsfiddle.net/t3Gjx/10/：

position:relative; z-index: 999;到頁腳和

z-index: 998;的內容和

「溢出：汽車」的頁面。

以防止這種情況發生。頁腳仍然停留在底部，菜單和內容滾動。

編輯：添加修改頁面元素

EDIT2：同樣，上述修改後，如果您將頁腳元素插入頁面元素的HTML，一切都應該滾動，包括頁腳。

來源

2013-07-15 15:24:56 karol

<!doctype html> 
<html lang="fr-FR"> 
<head> 
    <meta charset="UTF-8" /> 
    <title>Menu/Content/Status</title> 
    <style> 
    #menu-bar { 
     display   : block; 
     position  : absolute; 
     left   : 0; 
     top    : 0; 
     right   : 0; 
     height   : 30px; 
     margin   : 2px; 
     padding   : 2px; 
     border   : 1px solid darkgray; 
     background-color: whitesmoke; 
    } 
    #status-bar { 
     display   : block; 
     position  : absolute; 
     left   : 0; 
     bottom   : 0; 
     right   : 0; 
     height   : 30px; 
     margin   : 2px; 
     padding   : 2px; 
     border   : 1px solid darkgray; 
     background-color: whitesmoke; 
    } 
    #content { 
     display   : block; 
     position  : absolute; 
     left   : 0; 
     top    : 38px; 
     bottom   : 38px; 
     right   : 0; 
     margin   : 2px; 
     padding   : 2px; 
     border   : 1px solid darkgray; 
     background-color: whitesmoke; 
    } 
    </style> 
</head> 
<body> 
    <div id="menu-bar" >Menu bar</div> 
    <div id="status-bar">Status bar</div> 
    <div id="content" >Content</div> 
</body> 
</html>

來源

2016-06-06 14:03:19 Aubin

如何使此內容div可用高度的100％？

回答

相關問題