Question

我有一个简单的问题，我确信你们都会立刻解决。

我试图在我的孩子div上使用百分比高度，但这需要我在父div上使用100％的高度。但是，页脚仅考虑父div的高度，因此显示在页面的中间。这样做的正确方法是什么？

我的代码基本上是：

<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>

Answer 1

您只能在唯一元素上使用id，所以请改用class。

<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>

Answer 2

您可以使用position:absolute将页脚放在底部

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

＆＃13;

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<style type="text/css">

	#footer {
	width:100%;
	height:80px;
	position:absolute;
	bottom:0;
	left:0;
	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>

＆＃13;

Answer 3

奇怪的是，我无法在jsfiddle中显示你的问题，但它确实出现在普通的html测试中。

如果你在第一个div上使用min-height，这就像你一样期待它。

代码：

<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>

Nitpicky脚注：对多个元素使用相同的id是一个非常糟糕的主意。

Div影响页脚的100％高度

3 个答案: