扩展其他div时背景不覆盖100vh
当扩展其他div时，背景不覆盖100vh的问题通常是由于CSS样式设置不当导致的。以下是一些基础概念和相关解决方案：
基础概念
- 视口高度（vh）：
100vh表示视口高度的100%，即浏览器窗口的高度。 - 背景覆盖：确保元素的背景能够延伸到整个视口高度。
可能的原因
- 父元素的高度未正确设置：如果父元素的高度没有设置为
100vh，子元素的背景可能不会覆盖整个视口。 - CSS盒模型问题：内边距（padding）和外边距（margin）可能会影响元素的实际高度。
- 浮动元素的影响：浮动元素可能导致父元素高度塌陷。
解决方案
以下是一些常见的解决方案示例：
示例1：设置父元素高度为100vh
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body, html {
margin: 0;
padding: 0;
height: 100%;
}
.container {
height: 100vh;
background-color: lightblue;
}
.child {
height: 200px; /* 示例高度 */
background-color: lightcoral;
}
</style>
</head>
<body>
<div class="container">
<div class="child"></div>
</div>
</body>
</html>示例2：使用Flexbox布局
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body, html {
margin: 0;
padding: 0;
height: 100%;
}
.container {
display: flex;
flex-direction: column;
height: 100vh;
background-color: lightblue;
}
.child {
flex-grow: 1;
background-color: lightcoral;
}
</style>
</head>
<body>
<div class="container">
<div class="child"></div>
</div>
</body>
</html>示例3：清除浮动
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body, html {
margin: 0;
padding: 0;
height: 100%;
}
.container {
height: 100vh;
background-color: lightblue;
overflow: auto; /* 清除浮动 */
}
.child {
float: left;
width: 100%;
height: 200px; /* 示例高度 */
background-color: lightcoral;
}
</style>
</head>
<body>
<div class="container">
<div class="child"></div>
</div>
</body>
</html>应用场景
- 全屏背景：确保背景颜色或图片覆盖整个视口。
- 单页应用（SPA）：在页面切换时保持背景一致。
通过以上方法，可以有效解决扩展其他div时背景不覆盖100vh的问题。根据具体需求选择合适的解决方案即可。
相关·内容
1回答
当我展开组(每个组的蓝色按钮)时，背景不再覆盖整个。在我的电脑中，这就是行为，然而，在我创建的jsfiddle中，供你检查，背景甚至没有用未展开的框盖住它。我非常确定height:100vh;应该做它的工作:覆盖屏幕垂直空间的100%。但这并不是我们想要的行为。
浏览 25提问于2020-12-24得票数 0
回答已采纳
1回答
每次单击页面中的select元素时，背景的宽度都会略有变化，这会使背景图像闪烁。起初，我认为这是我的代码中的一个问题，但是在检查之后，我发现UI库文档中也会出现这种情况。示例：
谢谢。
浏览 8提问于2021-12-14得票数 1
回答已采纳
2回答
在所有页面上，我都有一个左右边距，横跨col 1，背景为黑色。如何让div的背景颜色/大小扩展整个页面(可滚动或不可滚动)，而不扩展其边界？我尝试使用了background-size: cover for image，但它扩展
浏览 0提问于2015-10-19得票数 0
试图在页面上实现一个“分裂为二”的背景；两种颜色在相反的边，用线性梯度来实现，但是如果某个元素(Div)大高度背景色重复出现。<body> test</body>body { height:100vh</em
浏览 1提问于2018-09-21得票数 2
回答已采纳
我正在努力使背景图像在移动视图上正确定位。当我查看网站时(或调整显示器的大小，使其成为移动视图)，图像显示得很好。然而，当我通过手机查看它时，图像，由于某种原因，似乎是调整大小，以适应手机的宽度。#hero{ max-width: 100%;</body>
浏览 3提问于2017-08-11得票数 0
回答已采纳
我的背景图像不想与页面的其余部分一起缩放。当我让它这样做时，当我缩小页面时，它在它的下面产生了一个巨大的空白间隙。.vintage { height: 100vh; background-repeat
浏览 1提问于2016-10-07得票数 0
2回答
不想要的滚动条右边距
、、、、
编辑：在上扩展行为此外，当鼠标在窗口宽度释放时，背景为而不是，显示在元素的右侧，则在下一次调整大小时，该行为仍然存在。但是，当鼠标在窗口宽度(背景显示在元素右侧的)释放时，滚动条跳到右侧以覆盖背景，并在其所属的右侧对其进行调整，然后，在浏览器刷新之前，所有未来的调整似乎都会对此行为进行修正。此外，这种行为并不是在每次刷新时都出现的。它似乎是随机的，大约每2-3次刷新
浏览 1提问于2019-08-05得票数 3
我想显示一个覆盖颜色的比例大小的图像，使用背景大小的包含.我的占位符div正确地展开到高度，但不扩展到宽度：.prop { width:100vw; height: 100vh;
background-positiontranspare
浏览 2提问于2018-05-02得票数 0
回答已采纳
2回答
每当我将导航栏设置为固定，并且页眉高度为100vh时，我的页眉似乎在导航栏下面。如何使导航栏不覆盖我的页眉，并使页眉100vh .nav { position: fixed; left: 0; background: red;
background: blue; margin-top: 80px; margi
浏览 16提问于2021-01-16得票数 0
回答已采纳
2回答
我有一个固定的标题，当我向下滚动页面时，我想把它放在容器div后面。就像在上看到的。它在某种程度上是有效的，除了内容div的背景似乎隐藏在标题的背景后面。不知道如何解决这个问题..position: fixed;background-size: cover;width: 100%;
z-index: 1
浏览 0提问于2014-05-15得票数 0
2回答
我遇到了一个问题，那就是我的语言页面的背景颜色并不全是蓝色。我尝试了一些解决方案，但无法完全解决着色问题。 font-style: normal; color: #fafe43; /*height: 100vh;*/ width: 100%; background-color: #4d92fb;
minHeight:
浏览 0提问于2019-08-13得票数 2
回答已采纳
我在我的网页中有一个弹出窗口，为了让它脱颖而出，我有另一个div (blurDiv)，它基本上是一个白色背景，弹出窗口和网页之间有80%的不透明度。我遇到的问题是，网页比视窗更长，blurDiv会填满viewport，但它不会覆盖网页下面的部分，当你滚动时，或者即使你不滚动，但开始向下滚动了一点，blurDiv从顶部开始，所以它不会覆盖所有的方式到底部</table> <div class="popup-d
浏览 14提问于2021-01-26得票数 0
1回答
我有一个div，我想在它上面使用固定的背景。我也使用背景大小的封面，以便从bg图像中获得最佳拟合。问题是背景图像会缩放，就好像要覆盖div的父级一样。而不是div本身。有没有办法解决这个问题？.panel-image { width:50%; background-attachment:fixed;background-position:center;
bac
浏览 1提问于2016-10-13得票数 2
4回答
我想用一个div覆盖整个屏幕。; width:100%; height:100%; border:none; margin:0; padding:0; overflow:hidden; z-index:999;"><div id="lessonContents" style="position:fixed; top:0px; left:0px; bottom:0px; right:0px; width:由于某些原因，即使sky.css主题的
浏览 1提问于2017-03-11得票数 2
3回答
我对在固定覆盖上设置owl旋转木马item内容的z索引有问题.固定的叠加应该在项目(背景图像)之上，而不是在项目内容之上。固定的覆盖不能是旋转木马项目的一部分，它必须保持静态时，幻灯片正在改变。我想要的：
我尝试了各种不同的方法，从不同的z索引值到所有元素的不同位置，但都没有成功。> CSS:
div<
浏览 4提问于2017-05-31得票数 3
4回答
我已经在HTML体中设置了如下背景(ReactJS)，它覆盖了主屏幕的大小，但如果.map函数有大量的项目，即我必须向下滚动，那么它就不会显示屏幕的那一部分(底部)，我想不出为什么它会这样做。</noscript><
浏览 29提问于2020-08-24得票数 0
我在我的网站上制作了两个表单，每个表单都被一个<div class="wrapper">标签包围。我使用CSS在其中添加了一个背景图像。我不能扩展图像的底部来填满整个屏幕。我不明白它为什么要这么做。
浏览 65提问于2018-06-07得票数 0
1回答
我有一个固定背景的页面，底部有一个浮动页脚。是否有一种方法可以在页面下面的超滚动区域隐藏元素？这是一个GIF：
当你“超滚动”时，你可以在屏
浏览 4提问于2016-06-21得票数 3
2回答
我基本上有一个网站，有几个背景堆叠在一起。这样做的想法是，按钮将滚动到下一个-(临界点)，其中每个背景正好适合浏览器的可视区域，如下所示：编辑我的问题是如何获取背景图像/div以适应浏览器的大小，不管它的大小如何。在本例中，背景非常适合浏览器，但是当我调整大小(正如我设置了背景高度时)，您可以开始看到下面的下一个背景：我想要第一个背景来填充可查看的浏览器窗口。只有当我单击相关按钮时，
浏览 0提问于2017-04-11得票数 1
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
云直播
对象存储
腾讯会议活动推荐
腾讯云开发者
