Question

我不确定此问题是否已经发布过，但我不知道如何有效地提出这个问题。

在我的网站上，我一个接一个地创建了两个大部分（不是指标签），一个高度设置为100％，另一个设置为90％。我在第二部分的正下方添加了一个div。为了防止陷入困境，我设置了＃34; top＆＃34;为了模拟两个部分的长度，为190％。虽然我已经为每个部分设置了最小高度，但是当div停止调整大小时div会在部分下方爬行。

如何使用＆＃34; position：absolute＆＃34;对于元素？

html示例（使用一个更大的部分）：

<html>
    <body>
        <div class="section1"></div>
        <div class="box"></div>
    </body>
</html>

css例子：

.section1 {
    display: inline-block; width: 100%; height: 100%; min-height: 500px;
    position: absolute;
}
.box {
    width: 100%; height: 200px;
    position: absolute; top: 100%; margin-top: 50px;
}

谢谢，

乔纳森

Answer 1

请勿使用position:absolute。

我假设你拥有它的原因是因为你需要高度100％的视口，而不使用JS。您可以使用vh单位，但它没有最佳的支持/可靠性。

最简单的方法是将html和body设置为height:100%;：

body,
html {
  margin: 0;
  height: 100%;
}
.full {
  height: 100%;
  background: teal;
}
.shorter {
  height: 90%;
  background: #fbfbfb;
}
footer {
  background: #222021;
  color: white;
  text-align: center;
  padding: 10px;
}

<section class="full"></section>
<section class="shorter"></section>
<footer>Made with love by a kitten</footer>

请注意，我确实添加了额外的CSS用于样式设置。

使用高度百分比时div的定位不正确

1 个答案: