当内容超过窗口大小时，在绝对定位元素上设置100％的高度

Question

9

在阅读Stack Overflow和网页后，我得出了实现100％高度的两个主要技巧：

然而，即使使用这些技巧，我仍然难以将绝对定位的DIV的高度设置为真正的100％。我可以获得视口大小的100％，但如果用户向下滚动，就会发现该div并没有真正具有100％的高度。

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

我的问题是：有人知道任何其他技巧来获取真正的（即内容高度，而不是视口高度）100％高度的绝对定位div吗？

- machineghost

2

position: relative？对于相对定位的元素，top: 0; bottom:0将没有任何效果。 - animuson

哦，也许这种方法应该使用position:absolute。我只知道position:absolute对我不起作用，但我在某个地方看到过top:0/bottom:0的技巧... - machineghost

给那些踩这个问题的人：如果可以的话，你能否请评论一下这个问题有什么问题吗？在我看来，它是合法的。 - machineghost

Prestaul，这是一个相对定位元素，已经应用了“left”属性。http://jsfiddle.net/azizpunjani/9FEne/6/ - aziz punjani

点赞因为这是一个合法的问题，只是措辞过于冗长。所提供的JS方法似乎有效...有人知道是否有一种仅使用CSS的方法来实现吗？ - btown

显示剩余6条评论

3个回答

7

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

var h = $(window).height();
$('#yourdiv').height(h);

- Trav McKinney

1

这是一个CSS问题，不是JavaScript问题。 - Prestaul

6

你问是否有“其他的技巧”。JavaScript 可以为这个问题提供简单的解决方案。 - Trav McKinney

我会说与OnResolve相同的话：这是公平的，但使用CSS解决这个问题并不难，而将JavaScript加入其中会引入其他问题...例如，当用户调整浏览器大小时会发生什么？ - Prestaul

还有，你没有理解他的问题。他不想让窗口大小变化，而是想根据文档内容自动调整大小。 - Prestaul

1

你也可以使用jQuery的resize()方法轻松检测窗口大小调整。 - Ian Hoar

理想情况下，我希望只需编写一两行CSS代码，就能使愚蠢的div在用户的显示器尺寸、内容大小或窗口大小是否调整的情况下始终保持100%的高度。话虽如此，不幸的是，我还没有看到这样一个纯CSS的解决方案，因此如果几个小时内没有出现这样的答案，我将接受这个答案。 - machineghost

4

我会使用JavaScript将高度和宽度分别赋值为文档的高度和窗口的宽度；我已经修改了您的jsfiddle演示，以此进行演示：

- OnResolve

1

实际上，如果你仔细阅读他的问题，就没有任何暗示他的解决方案需要纯CSS。事实上，听起来他已经用尽了CSS，但仍然需要所需结果。不知道为什么另一种解决方案值得-1...似乎最好呈现所有选项，不是吗？ - OnResolve

这是公平的，但这并不难以通过CSS解决，而将JavaScript加入其中会引入其他问题...例如，当用户调整浏览器大小时会发生什么？ - Prestaul

你们都是对的：我正在寻找一个纯CSS解决方案，但我在原问题中并没有直接表明。虽然我仍然更喜欢纯CSS的解决方案，但既然还没有出现这样的解决方案，看起来JS可能是唯一的选择。 - machineghost

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Prestaul · Accepted Answer

不好意思，之前我误解了真正的问题并认为你希望填充窗口。如果问题是内容比窗口更长，则需要向body添加position:relative。

发生的情况是，当您绝对定位某些元素时，它会相对于最近的定位元素进行定位（和调整大小）。如果您没有告诉它相对于body定位，则它将相对于窗口定位。