9

因此，在阅读了 Stack Overflow 和网络之后，我总结了实现 100% 高度的两个主要技巧：

  1. 在 HTML 和 BODY 上设置 height:100%
  2. 将您的元素设置为：
    • 高度：100%，或
    • 顶部：0，底部：0，位置：绝对

但是，即使使用这些技巧，我也很难将绝对定位的 DIV 的高度设置为真正的 100%。我可以获得 100% 的视口大小，但如果用户向下滚动，很明显 div 并没有真正具有 100% 的高度。

我在这里做了一个简单的 JS Fiddle：http: //jsfiddle.net/9FEne/

我的问题是：有没有人知道任何进一步的技巧来获得一个真正的（即内容高度，而不是视口高度）100% 高度绝对定位的 div？

4

3 回答 3

12

抱歉，我之前错过了真正的问题，并认为你想要填满窗口。如果问题是内容比窗口长，那么您需要添加position:relative到正文中。 http://jsfiddle.net/9FEne/7/

发生的事情是，当您绝对定位某些东西时，它相对于最近的定位元素定位（和大小）。如果您不告诉它定位到身体，那么它将定位到窗口。

于 2012-04-13T19:12:42.843 回答
7

你可以使用 jQuery 来实现这个技巧

var h = $(window).height();
$('#yourdiv').height(h);
于 2012-04-13T18:58:27.187 回答
4

我会使用 javascript 将高度和宽度分别指定为文档的高度和窗口的宽度；我已经修改了您的 jsfiddle 以在此处进行演示：

http://jsfiddle.net/9FEne/1/

于 2012-04-13T19:01:27.037 回答