html 高度为自动时如何设置百分比高度？

Question

我遇到了一个非常令人沮丧的问题。我想要做的是制作一个高度为页面高度 20% 的 div "#generic-div"，并设置一个始终贴在页面底部的页脚*;两者似乎是相互排斥的。

*"page" 并不是指 window 中显示的当前可见矩形 - 我指的是可能中的所有内容通过水平或垂直滚动来查看，因此 #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填满了页面中所有可用的space，#footer尽量往下推。但是，#generic-div 没有明确的父元素高度来继承它的高度，所以它的高度是 0。

当我这样做时：

html {height: 100%, width: 100%;}
#generic-div {height: 20%;}
#footer {top: 0;}

#generic-div的高度设置为页面的20%，但是现在html的高度正好是浏览器的高度window，所以#footer 设置在浏览器底部边框 window 的正下方，当我向下滚动时，更多内容会显示在页脚下方下方。我希望页脚是最底部的内容。

我怎样才能完成 height: 20% div 和底部的页脚？

如果我的问题的任何部分不清楚，请告诉我，我会尽力澄清。

Answer 1

好的。我明白你想做什么。这就是您要找的。答案已经在 fiddle 上进行了测试，为了方便起见，下面提供了代码。您遇到的问题是 body html 元素就是一切。 HTML 元素只是可见的 space。 所以解决方案。只是不要将 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 高度为自动时如何设置百分比高度？

How to set height with percentage when html height is auto?

html

css

position

height

当我这样做时：

当我这样做时：