gpt4 book ai didi

html - 如何在更多内容上方放置 100% 高度的 div?

转载 作者:太空宇宙 更新时间:2023-11-04 11:11:44 24 4
gpt4 key购买 nike

我有一个以全屏图像为舞台的着陆页。然后你可以向下滚动查看更多内容。底部是页脚。

landingpage
fullscreen image (height 100%)
content below that image
footer

我怎样才能做到这一点?

为了使图像高度起作用,我需要将着陆页高度设置为 100%。但随后页脚位于图像下方,覆盖着陆页内的其他内容。

如果我将图像设置为绝对定位并且高度为 100%,着陆页内的内容将覆盖图像。

编辑:根据要求提供一些代码。我想让舞台的高度为 100%。

<div id="landing">
<div id="stage"></div>
Some more content...
</div>
<div id="footer"></div>

最佳答案

您可以使用 <section>用 CSS 标记 height: 100vh

<body id="landing">
<header></header> <!-- navigation or logo + full-width -->
<section id="stage">
<img src="" alt=""> <!-- absolute -->
</section> <!-- 100% height + full-width -->
<section></section> <!--other content + full-width-->
<footer></footer> <!--full-width-->
</body>

更多关于 Css Units

关于html - 如何在更多内容上方放置 100% 高度的 div?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33571325/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com