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

mac*_*ost 9 css height css-position

所以在阅读Stack Overflow和网络后,我发现有两个主要技巧可以实现100%的高度:

  1. 在HTML和BODY上设置高度:100%
  2. 将您的元素设置为:
    • 身高:100%,或
    • top:0,bottom:0,position:absolute

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

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

我的问题是:有没有人知道任何进一步的技巧来获得一个真正的(即内容高度,而不是视口高度)100%高度绝对定位div?

Pre*_*aul 11

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

发生的事情是,当你绝对定位某个东西时,它相对于最近的定位元素定位(和大小).如果你没有告诉它定位到身体那么它将定位到窗口.


Tra*_*ney 7

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

var h = $(window).height();
$('#yourdiv').height(h);
Run Code Online (Sandbox Code Playgroud)

  • 那么你问是否有"任何进一步的伎俩".javascript可以为这个问题提供一个简单的解决方案. (6认同)