gpt4 book ai didi

html - 为什么这个高度为 100vh 的 div 没有覆盖整个视口(viewport)?

转载 作者:搜寻专家 更新时间:2023-10-31 08:49:53 25 4
gpt4 key购买 nike

此代码中蓝色 div 的高度为 100vh,而红色 div 的高度为 5000px。由于 100vh 高度属性,蓝色 div 不应该扩展自身以覆盖整个视口(viewport)吗?

body {
margin: 0;
}
<div style="position: absolute; left: 35%; width: 100px; height: 100vh; background-color: blue;">
</div>
<div style="position: absolute; left: 50%; width: 100px; height: 5000px; background-color: red;"></div>

我想由此实现的是,假设有一些文本在缩小窗口时溢出,那么我应该如何解决这种情况,以便 100vh 高度 div 再次覆盖新的窗口大小?

最佳答案

Viewport height 只是表示元素的高度将是视口(viewport)的百分比。视口(viewport)是您查看页面的窗口。因此,如果它是 1920x1080 屏幕,视口(viewport)高度将为 1080px 或任何浏览器窗口,如果屏幕底部有工具栏,它可能会更小。你遇到的问题是,如果你想让侧边栏跟随页面的主要内容,你需要忽略视口(viewport)并在它们周围都有一个包装器,如下所示:

.main-wrapper{
display:flex;
}

aside{
background:blue;
color:#fff;
width:200px;
}

main{
background:green;
height:5000px;
flex:1
}
<div class="main-wrapper">
<aside>Your sidebar</aside>
<main>Your Main Content</main>
</div>

话虽如此,您可能想查看以下 fiddle Here .我已经使这个 fiddle 响应移动屏幕,因此您可能需要将输出窗口的大小调整得更大才能查看侧边栏布局。问题是您绝对在 divs 之外定位元素和修复元素,这是不好的做法。在您上面评论的示例中,您会遇到许多布局和 z-index 问题。 This fiddle 只是一个示例,但它应该为您提供一个关于如何考虑布局的良好引用框架。

关于html - 为什么这个高度为 100vh 的 div 没有覆盖整个视口(viewport)?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55550007/

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