Question

您好，

我知道这个问题与其他问题非常相似，而且我已经检查了它们但是我无法使它工作，我的问题也有所不同。

首先，我有block 100％视口高度。它必须定位absolute，否则我无法使其成为视口的100％。然后有一个块，其高度将由它的内容决定。现在问题是最后一个块不会被置于绝对块之下，因为它们会重叠，因为第一个块有position: absolute。我可以通过相对定位第二个来使它工作，但我希望有超过1个块，如下面的第二个。

这就是我想要的

 ______________________
|                      |
|     height:100%;     | position:absolute;
|______________________|
|                      |
|   SometextSometext   | height:auto;
|   SometextSometext   | /*determined by it's content*/
|______________________|
|                      |
|   SometextSometext   | height:auto;
|   SometextSometext   | /*determined by it's content*/
|______________________|

Answer 1

从第一个div移除定位，将其高度设置为100vh

More on vh from MDN

vh 视口高度的1/100。

＆＃13;

html,
body {
  height: 100%;
  margin: 0;
}
section:first-of-type {
  height: 100vh
}
section {
  border: 1px solid;
  box-sizing: border-box;
}

＆＃13;

<div></div>
<div>content</div>
<div>content
  <br />content
  <br />content
  <br />content
  <br />content
  <br />
</div>

＆＃13;

放置相对pos。 div低于绝对位置。 DIV

1 个答案: