我遇到了一个令人沮丧的问题。我想做的是使div“＃generic-div”的高度为页面高度的20％，并设置一个始终粘贴在页面底部的页脚*；两者似乎是互斥的。
*“页面”不是指窗口中当前显示的矩形，而是指可以通过水平或垂直滚动查看的所有内容，因此#footer {position: fixed; bottom: 0;}不是解决方案。页脚必须始终在我的div .container下。
这是我的application.html.erb：
<!DOCTYPE html>
<html>
<!-- ... -->
<body>
<div class="container"><%= yield %></div>
<div id="footer"></div>
</body>
</html>
当我这样做时：
html {height: auto, width: 100%;}
#generic-div {height: 20%;}
#footer {top: 0;}
HTML填充了页面中的所有可用空间，并且
#footer一直被向下推。但是，#generic-div没有显式的父元素高度可以继承其高度，因此其高度为0。当我这样做时：
html {height: 100%, width: 100%;}
#generic-div {height: 20%;}
#footer {top: 0;}
#generic-div的高度设置为页面的20％，但是现在html的高度仅是浏览器窗口的高度，因此#footer设置为恰好在浏览器窗口底部边框的下方，并且我向下滚动，页脚下方显示更多内容。我希望页脚是最底层的内容。如何完成
height: 20% div和底部的页脚？如果问题的任何部分不清楚，请让我知道，我将尽力澄清。
最佳答案
好。我了解您要做什么。这就是您要寻找的。答案已经在小提琴上进行了测试，下面为方便起见提供了代码。您遇到的问题是body html元素就是一切。 HTML元素只是可见空间。所以解决。只是不要将100％应用于HTML标记，而只需将BODY标记应用。
http://jsfiddle.net/qs3ydnyv/5/
的CSS
body{
margin:0px;
padding:0px;
clear:both;
color:#000;
height:100%;
display:block;
}
.container{
height:80%;
width:100%;
background-color:#A00002;
display:block;
}
#footer{
width:100%;
height:20%;
background-color:#005C97;
display:block;
}
的HTML
<body>
<div class="container">Here is some Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque ex sem, imperdiet vitae vehicula quis, cursus ac risus. Nullam nibh ligula, rhoncus ut velit id, dignissim posuere diam. Donec ante justo, gravida vel dolor quis, semper blandit turpis. Aliquam posuere iaculis nunc, sed matda vel dolor quis, semper blandit turpis. Aliquam posuere iaculis nunc, sed mattis velit lacinia sit amet. Sed sed urna mattis, posuere libero id, consequat ante. Aliquam ac pretium lectus, eu semper dui. Aliquam maximus nibh nec elit sagittis, ac efficitur ipsum mattis. Fusce rhoncus rutrum mi a sollicitudin. Praesent non arcu non lectus pharetra tincidunt eu sit amet leo. Aenean eu elementum tortor. Sed id erat quis nibh aliquet hendrerit. Phasellus tempus quamm ligula, suscipit quis aliquet eu, eleifend at neque.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque ex sem, imperdiet vitae vehicula quis, cursus ac risus. Nullam nibh ligula, rhoncus ut velit id, dignissim posuere diam. Donec ante justo, gravida vel dolor quis, semper blandit turpis. Aliquam posuere iaculis nunc, sed mattis velit lacinia sit amet. Sed sed urna mattis, posuere libero id, consequat ante. Aliquam ac pretium lectus, eu semper dui. Aliquam maximus nibh nec elit sagittis, ac efficitur ipsum mattis. Fusce rhoncus rutrum mi a sollicitudin. Praesent non arcu non lectus pharetra tincidunt eu sit amet leo. Aenean eu elementum tortor. Sed id erat quis nibh aliquet hendrerit. Phasellus tempus quam id arcu consequat, nec porttitor nisl molestie. Ut quam ligula, suscipit quis aliquet eu, eleifend at neque.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque ex sem, imperdiet vitae vehicula quis, cursus ac risus. Nullam nibh ligula, rhoncus ut velit id, dignissim posuere diam. Donec ante justo, gravida vel dolor quis, semper blandit turpis. Aliquam posuere iaculis nunc, sed mattis velit lacinia sit amet. Sed sed urna mattis, posuere libero id, consequat ante. Aliquam ac pretium lectus, eu semper dui. Aliquam maximus nibh nec elit sagittis, ac efficitur ipsum mattis. Fusce rhoncus rutrum mi a sollicitudin. Praesent non arcu non lectus pharetra tincidunt eu sit amet leo. Aenean eu elementum tortor. Sed id erat quis nibh aliquet hendrerit. Phasellus tempus quam id arcu consequat, nec porttitor nisl molestie. Ut quam ligula, suscipit quis aliquet eu, eleifend at neque.
</div>
<div id="footer">gravida vel dolor quis, semper blandit turpis. Aliquam posuere iaculis nunc, sed mattis velit lacinia sit amet. Sed sed urna mattis, posuere libero id, consequat ante. Aliquam ac pretium lectus, eu semper dui. Aliquam maximus nibh nec elit sagittis, ac efficitur ipsum mattis. Fusce rhoncus rutrum mi a sollicitudin. Praesent non arcu non lectus pharetra tincidunt eu sit amet leo. Aenean eu elementum tortor. Sed id erat quis nibh aliquet hendrerit. Phasellus tempus quam id arcu consequat, nec porttitor nisl molestie. Ut quam ligula, suscipit quis aliquet eu, eleifend at neque. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque ex sem, </div>
</body>
关于html - 当HTML高度为自动时，如何用百分比设置高度？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/28352940/