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％影响页脚高度

回答

相关问题