代码之家 › 专栏 › 技术社区 › Jonathan Fogelström

使用百分比表示的高度时,DIV的位置不正确

margin css-position position css html

Jonathan Fogelström · 技术社区 · 9 年前

我不确定这个问题以前是否被发布过,但我不知道如何有效地问这个问题。

在我的网站上,我创建了两个大的部分,一个接一个(不指标签),一个高度设置为100%,另一个设置为90%。我在第二部分的正下方添加了一个div。为了使div保持不变,我将“top”设置为190%,以模拟两个部分的长度。尽管我已经为每个部分设置了最小高度,这使得当分区停止调整大小时,div会在分区下方爬行。

在使用元素的“位置:绝对”时,如何避免这种情况?

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;
}

谢谢

乔纳森

1 回复 | 直到 9 年前

Jacob G 9 年前

只是不要使用 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用于样式设计。

推荐文章

Jamie · 在CSS链接的文件名中添加Jinja占位符

1 年前

Mass · 如何在Tailwind CSS v4中创建配置

1 年前

magenta placenta · 将css变量合并为一个变量

1 年前

ptownbro · 重叠分区标签,同时保持以下所有分区和内容就位

1 年前

Luke Frost IEng MIMechE · Bootstrap 5.3在Div中的项目位置没有如我所期望的那样显示

1 年前

user29519291 · 为不同的变量创建一个带有可重用Click函数的简单菜单

1 年前

john Rizzo · 按钮背景颜色、悬停和活动状态存在问题

1 年前

Ben Halicki · 带有垂直和水平滚动条的表,使用HTML/CSS/Bootstrap-5固定行和列

1 年前

Luckkks · 过渡色工作不正常

1 年前

ModernEraCaveman · 如何对齐我的Bootstrap容器以适应网页的整个宽度?

1 年前