100％影響頁腳高度

-1

我有一個簡單的問題，我相信你們都很快就能解決問題。100％影響頁腳高度

我想在我的子div上使用百分比高度，但那需要我在父div上使用100％的高度。但是，頁腳僅佔父窗格的高度，因此顯示在頁面中間。什麼是正確的方法來做到這一點？

我的代碼基本上是：

<body style="height: 100%"> 
<div style="height: 100%"> 
    <div id="child" style="height: 50%"> 
    </div> 
    <div id="child" style="height: 50%"> 
    </div> 
    <div id="child" style="height: 50%"> 
    </div> 
    <div id="child" style="height: 50%"> 
    </div> 
</div> 
<footer> </footer> 
</body>

來源

2015-02-23 user3089457

你只能使用ID的唯一元素，所以請使用類來代替。

<body> 
 
<div> 
 
    <div class="child" style="height: 50vh"> child </div> 
 
    <div class="child" style="height: 50vh"> child </div> 
 
    <div class="child" style="height: 50vh"> child </div> 
 
    <div class="child" style="height: 50vh"> child </div> 
 
</div> 
 
<footer> Footer </footer> 
 
</body>

來源

2015-02-23 18:45:24

不是我想知道的。這甚至不是我的代碼，它只是一些隨機的東西，我寫給你看HEIGHT。我不在乎ID和班級。但是......現在是一個普遍被接受的單位嗎？ – user3089457 2015-02-23 18:47:55

您可以使用position:absolute放置頁腳底部

#footer { 
width:100%; 
height:80px; 
position:absolute; 
bottom:0; 
left:0; 
background:#ee5; 
}

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
\t <title></title> 
 
\t <style type="text/css"> 
 

 
\t #footer { 
 
\t width:100%; 
 
\t height:80px; 
 
\t position:absolute; 
 
\t bottom:0; 
 
\t left:0; 
 
\t background:#ee5; 
 
}</style> 
 
</head> 
 
<body style="height: 100%"> 
 
<div style="height: 100%"> 
 
    <div id="child" style="height: 50%"> 
 
    <h1>first div</h1> 
 
    </div> 
 
    <div id="child" style="height: 50%"> 
 
    <h1>div again</h1> 
 
    </div> 
 
    <div id="child" style="height: 50%"> 
 
    <h1>Just another div</h1> 
 
    </div> 
 
    <div id="child" style="height: 50%"> 
 
    <h1>Another Div</h1> 
 
    </div> 
 
    <footer style="background-color:green" id="footer"><h1>Footer</h1> </footer> 
 
</div> 
 

 
</body> 
 
</html>

來源

2015-02-23 18:50:24 julekgwa

奇怪的是，我不能得到這個在jsfiddle中顯示你的問題，但它確實出現在純html測試中。

這樣的工作就像你期待它，如果你在你的第一個div使用最小高度。

代碼：

<body style="height: 100%"> 
    <div style="min-height: 100%"> 
    <div class="child" style="height: 50%">a</div> 
    <div class="child" style="height: 50%">b</div> 
    <div class="child" style="height: 50%">c</div> 
    <div class="child" style="height: 50%">d</div> 
    </div> 
    <footer> FOOTER</footer> 
</body>

挑剔的註腳：這是一個非常糟糕的主意，用相同的ID的多個元素。

來源

2015-02-23 21:39:48 skrawler

100％影響頁腳高度

回答

相關問題