Question

我有一个容器div，我的身高是100％

  #pageContainer{
   width:800px;
   margin:auto;
   height:inherit;
   }

在里面我有第二个div绝对定位

  <div style="position:absolute;opacity:.05;background-color:white;width:inherit;height:100%;"></div>

所以我的页面看起来像这样：

 <body>
 <div id="pageContainer">
 <div style="position:absolute;opacity:.05;background-color:white;width:inherit;height:100%;"></div>
 <div>some content here</div>

 </div>
 </body>

所以问题是绝对定位的div的高度等于屏幕大小，而不是页面，当页面比可见屏幕更高时的另一个单词，当我向下滚动div时没有扩展到父级的完整高度div（pageContainer）。我尝试了顶部：0px;底部：0px;以及它不起作用。任何人都知道这里的诀窍是什么？

Answer 1

Javascript：你要么通过.height（）或EqualHeight使用jQuery，或

CSS：你会做这样的事情：CSS equal columns

Answer 2

您必须设置层次结构中每个元素的height，使其像这样展开。

尝试类似：

html, body {
    height: 100%;
}

设置html元素的高度是我通常忘记做的事情。通常还需要将#pageContainer高度设置为100%，尽管你从身体继承它，所以在这种情况下你没事。

Answer 3

尝试将position:relative;添加到您的#pageContainer。目前，绝对定位的div正在从窗口而不是容器div中占据它的位置。

div里面的另一个div没有扩展到页面高度，只有屏幕高度

3 个答案: