Question

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

我想做的是主要div以适应主要内部高度和普通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>

Answer 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 */
}

Answer 2

如果我理解正确，你想根据孩子的宽度和身高调整宽度和高度。对我来说，这可以通过将父div显示设置为table-cell和width，height设置为auto来实现。子设置显示为阻止，宽度，高度为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;
}

CSS：在具有绝对位置的div子项的div之后放置一个div

2 个答案: