Question

我与CSS堆在一起，试图将位置<div>的绝对高度指定为起始位置的剩余高度。让我用以下代码片段更好地进行解释：

#main {
  background-color: yellow;
}

#container {
  display: grid;
  position: relative;
  grid-template-rows: auto auto;
}

#child_1 {
  background-color: red;
  grid-row: 1 / 2;
  height: 100px; // this can vary
}

#child_2 {
  background-color: green;
  grid-row: 2 / 3;
  height: 77px; // this can vary
}

#child_3 {
  width: 100%;
  position: absolute;
  top: 100%;
  background: lightblue;
}

<div id="main">
<div id="container">
  <div id="child_1">CHILD 1</div>
  <div id="child_2">CHILD 2</div>
  <div id="child_3">CHILD 3<br /> CHILD 3</div>
</div>
  
  <div id="something-else">
    Something that is <br />
    behind <br />
    the absoolute <br />
    div <br />
  </div>
  
</div>

如您所见，div#child_3就在div#child_2之后开始（这是一个约束，我确实希望这样做），我也希望它是position: absolute，因为它必须覆盖所有内容

我想实现的是div#child_3占据从起点到视口终点的所有高度。为了更清晰，请看以下图像：

困难的部分是..我只想用CSS来实现！！
因为到目前为止，我发现的唯一解决方案是将#something-else授予他一个div#child_3并设置一个div#child_3来覆盖{调整了尺寸。
顺便说一下，请注意我无法设置固定的(100vh - div#child_3.getBoundingBoundRect().Top)，因为用CSS代码编写的ResizeObserver和height: calc(100vh - 177px)的高度可能会有所不同。

此外，div#child_1不应受到影响：我只能处理div#child_2及其子项，因为它们是单独组件的一部分（此示例已简化）。

Answer 1

如果没有理由将任何子级的位置设置为绝对位置，则可以使用flexbox实现此布局。请参见下面的代码段作为示例：

.parent {
  height: 100vh;
  
  /* Important styles below */
  display: flex;
  flex-flow: column wrap;
}

.child {
  background: blue;
}

.child:nth-of-type(even) {
  background: red;
}

.child--large {
  /* Important styles below */
  flex: 1;
}

<div class="parent">
  <div class="child">
    1
  </div>
  <div class="child">
    2
  </div>
  <div class="child">
    3
  </div>
  <div class="child child--large">
    4
  </div>
</div>

Answer 2

使用CSS flex-box。它比网格更加灵活和响应迅速。

#main {
  background-color: yellow;
}

#container {
  display: flex;
  flex-direction: column;
  height: 100vh;
 }

#child_1 {
  background-color: red;
  flex-grow: 1;
 }

#child_2 {
  background-color: green;
  flex-grow: 1;
}

#child_3 {
  background-color: lightBlue;
  flex-grow: 2;
 }

<div id="main">
<div id="container">
  <div id="child_1">CHILD 1</div>
  <div id="child_2">CHILD 2</div>
  <div id="child_3">CHILD 3<br /> CHILD 3</div>
</div>
  
<div id="something-else">
  More<br>elements<br>down<br>here...
</div>
</div>

Answer 3

已编辑：似乎我在下面提供的原始答案不是您想要的。当尝试在自己的本地计算机（而不是Stackoverflow的代码段编辑器）上尝试时，我想到的另一个想法是将Route::get('/', 'HomeController@index');包装在另一个名为#child_3的div中，然后相对于#child_3_wrapper定位#child_3，而不是#child_3_wrapper。这是完整的代码：

#container

#main {
  background-color: yellow;
}

#container {
  display: grid;
  height: 100vh; /*added this, try 100%, 98vh(or *padding:0;margin:0,...etc) to get the result desired*/ 
  grid-template-rows: auto auto 1fr; /*added 1fr*/
}

#child_1 {
  background-color: red;
  grid-row: 1 / 2;
  height: 100px;
}

#child_2 {
  background-color: green;
  grid-row: 2 / 3;
  height: 77px; 
}

/* changed the code below */
#child_3_wrapper {
  position: relative;
}
#child_3 {
  position: absolute;
  top: 0; /* change top to 0 - relative to the wrapper, not the grid any more*/
  width: 100%;
  height: 100%; 
  background: lightblue;
}

旧答案

这是您想要的吗？我尝试对其进行调整以获得结果。将<div id="main"> <div id="container"> <div id="child_1">CHILD 1</div> <div id="child_2">CHILD 2</div> <div id="child_3_wrapper"> <div id="child_3">CHILD 3<br /> CHILD 3</div> </div> </div> <div id="something-else"> Something that is <br /> behind <br /> the absoolute <br /> div <br /> </div> </div>添加到height: 100%;和#container

#child_3

#main {
  background-color: yellow;
}

#container {
  display: grid;
  height: 100%; /* add this */
  position: relative;
  grid-template-rows: auto auto;
}

#child_1 {
  background-color: red;
  grid-row: 1 / 2;
  height: 100px; // this can vary
}

#child_2 {
  background-color: green;
  grid-row: 2 / 3;
  height: 77px; // this can vary
}

#child_3 {
  width: 100%;
  position: absolute;
  top: 100%;
  height: 100%; /* add this */
  background: lightblue;
}

绝对DIV占据所有剩余高度

3 个答案:

旧答案