CSS：在具有绝对位置的 div 子元素的 div 之后放置一个 div答案

【问题标题】：CSS : Place a div after a div with a div child of absolute positionCSS：在具有绝对位置的 div 子元素的 div 之后放置一个 div
【发布时间】：2016-01-13 23:07:55
【问题描述】：

我有一个问题，我想在一个具有绝对位置的 div 子元素的 div 之后放置一个 div。

我想做的是主 div 以适应 main-inner-one 高度和正常 div 发生在主 div 之后

这是我的代码：jsfiddle

#main {
  width:100%;
  background-color:#f00;
  padding:20px 0px 20px 0px;
  position:relative;
}
#main-inner-one {
  width:100%;
  height:200px;
  background-color:#f9c;
  position:absolute;
}
#normal {
  width:100%;
  height:50px;
  background-color:#000;
}

<div id="main">
  <div id="main-inner-one"></div>
</div>
<div id="normal"></div>

【问题讨论】：

不清楚您要做什么。您能否edit您的问题并简要说明预期结果以及为什么这不起作用？
可能重复 - stackoverflow.com/questions/8184919/…
我想知道是否可以仅使用 css 来完成

标签： css css-position absolute

【解决方案1】：

要使#main-inner-one 跨越#main，您需要删除absolute 定位。

Preview - 它应该是这样工作的。

答案：改变这个

#main-inner-one {
    position: relative;
    padding:20px 0px 20px 0px;
}

#main {
    padding:20px 0px 20px 0px; /* remove this */
}

【讨论】：

【解决方案2】：

如果我理解正确，您想根据孩子的宽度和高度调整宽度和高度。对我来说，这是通过将父 div 显示设置为表格单元格和宽度、高度为自动来实现的。孩子将 display 设置为 block 并将宽度、高度设置为 vw / vh 或除 % 值之外的任何其他值。

#main {
  display:table-cell;
  position:relative;
  width:auto;
  height:auto;
  background-color:#f00;
  padding:20px 0px 20px 0px;
}
#main-inner-one {
  display:block;
  position:relative;
  width:100vw;
  height:80vh;
  background-color:#f9c;
}
#normal {
  display:block;
  position:relative;
  width:100%;
  height:50px;
  background-color:#000;
}

【讨论】：