html - 绝对定位的 div 与相对子级的高度相同

Question

我有一个以渐变为背景的网站。.main div 是绝对定位的。我希望它与其中的内容具有相同的高度，但我该如何实现呢？

Answer 1

绝对不要让你的 main/container/wrapper div 绝对定位。有相对定位。

 <div class = "main">

    <div class = "content">....</div>

 </div>

然后你有你的CSS：

.main {
  position: relative;
  margin: 0 auto;
}

.content {
  height: 100%;
}

看看这个 jFiddle：http: //jsfiddle.net/persianturtle/3eJGr/

可以在这里找到一篇关于绝对定位真正作用的精彩文章

一个片段：

绝对定位的元素完全从文档流中删除。这意味着它们对其父元素或源代码中出现在它们之后的元素完全没有影响。因此，绝对定位的元素将与其他内容重叠，除非您采取措施阻止它。

Answer 2

如果绝对定位的 div 中的元素是相对定位的并且具有宽度和高度，则可以将此 css 应用于您的.maindiv：

height:auto;

这将根据里面所有内容的高度计算高度