Question

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

*“页面”，我不是指窗口中显示的当前可见矩形 - 我的意思是通过水平或垂直滚动来查看可能的所有内容，所以{{ 1}}不是解决方案。页脚必须始终位于我的div #footer {position: fixed; bottom: 0;}下。

这是我的application.html.erb：

.container

当我这样做时：

<!DOCTYPE html>
<html>
<!-- ... -->
<body>
  <div class="container"><%= yield %></div>
  <div id="footer"></div>
</body>
</html>

HTML填充页面中的所有可用空间，html {height: auto, width: 100%;} #generic-div {height: 20%;} #footer {top: 0;}尽可能地向下推。但是，#footer没有明确的父元素高度来继承其高度，因此其高度为0.

当我这样做时：

#generic-div

html {height: 100%, width: 100%;} #generic-div {height: 20%;} #footer {top: 0;}的高度设置为页面的20％，但现在#generic-div的高度只是浏览器窗口的高度，因此html设置在浏览器窗口的底部边框，当我向下滚动时，会在页脚下显示更多内容。我希望页脚成为最底层的内容。

如何在底部完成#footer div 和页脚？

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

Answer 1

确定。我明白你要做什么。这就是你要找的东西。答案已经在小提琴上进行了测试，下面的代码是为了您的方便。你遇到的问题是 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高度为自动时，如何设置高度与百分比？

当我这样做时：

当我这样做时：

1 个答案: