当内容超过窗口大小时，在绝对定位的元素上设置100％的高度 [英] Setting 100% height on an absolutely positioned element when the content expands past the window size

问题描述

因此，在阅读Stack Overflow和网络之后，我收集了达到100％高度的两个主要技巧：

So after reading Stack Overflow and the web, I've gathered that there are two main tricks to achieving 100% height:

1. 在HTML和BODY上设置高度：100％


2. 将元素设置为：
   
   
   
   • height：100％ / li>
     
   • top：0，bottom：0，position：absolute
   
   

b $ b

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

However, even with those tricks I'm having difficulty setting the height of an absolutely positioned DIV to a true 100%. I can get 100% of the viewport size, but if the user scrolls down at all it becomes apparent that the div doesn't truly have 100% height.

ve做了一个简单的jfiddle的情况在这里：
http://jsfiddle.net/9FEne/

I've made a simple JS Fiddle of the situation here: http://jsfiddle.net/9FEne/

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

My question is: does anyone know any further tricks to get a true (ie. content-height, not viewport-height) 100% height absolutely positioned div?

推荐答案

对不起，我错过了真正的问题之前，并想到你想要的窗口填充。如果问题是内容比窗口长，那么你需要的是添加 position：relative 到正文。 http://jsfiddle.net/9FEne/7/

Sorry, I missed the real question before and thought you wanted the window filled. If the issue is that the contents are longer than the window then what you need is to add position:relative to the body. http://jsfiddle.net/9FEne/7/

发生的是，当你绝对地定位东西时，它相对于最接近的定位元素的位置（和大小）。如果你不告诉它定位到身体，它将定位到窗口。

What is happening is that when you absolutely position something it positions (and sizes) relative to the nearest positioned element. If you don't tell it to position to the body then it will position to the window.

这篇关于当内容超过窗口大小时，在绝对定位的元素上设置100％的高度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！