另一个 div 内的 div 不扩展到页面高度，仅扩展到屏幕高度答案

【问题标题】：div inside another div not expanding to page height, only to screen height另一个 div 内的 div 不扩展到页面高度，仅扩展到屏幕高度
【发布时间】：2012-04-29 14:05:18
【问题描述】：

我有一个容器 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（页面容器）。我已经尝试过 top:0px;bottom:0px;以及它不工作。有谁知道这里的诀窍是什么？

【问题讨论】：

它是否正在切断内容？还是这是视觉问题？
绝对定位的div是空的所以没有内容被截断，问题是它只取可见屏幕的高度，而不是整个页面
绝对定位的div是否只用于单色背景？如果是这样，请使用position: fixed

标签： html css css-position

【解决方案1】：

Javascript：您可以通过 .height() 或 EqualHeight 使用 jQuery，或

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

【讨论】：

【解决方案2】：

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

尝试类似：

html, body {
    height: 100%;
}

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

【讨论】：

【解决方案3】：

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

【讨论】：