Question

我无法理解为什么我的相对div（.wrap）不会显示其css定义的背景颜色或图像。身体有自己的背景，.wrap为div及其内容创建一个新的.wrap。（ .local是我想要的绝对div .wrap创建一个背景，因为它是我需要从.wrap 获得单个共享背景的众多div之一）
任何帮助都会受到很大关注！

CSS

body{
min-height: 100%;
min-width:100%;
font-family: 'Open Sans', sans-serif;
background-color: gray;
} 

.wrap {
position: relative;
height: 100%;
width: 70%;
background-color: white;
left: 15%;
}


.local {
position: absolute;
height: 40%;
width: 20%;
}

HTML

<!-- MAIN BODY -->
<div class="wrap">

<!-- LOCAL WEATHER -->
<div class="local">
<p>THIS IS A TEST PARAGRAPH TO SHOW THE RELATIVE DIV ISSUE</p>
<!-- <img src="images/weatherphoto.png"> -->
</div>
</div>

Answer 1

你的问题是你的wrap课程（除了你的local课程实际上没有高度。你在身体中指定min-height: 100%，但身体没有父亲固定高度，实际上不会做任何事情;）

您实际需要的是身体height: 100vh，以确保它占据页面高度的100％。可以找到一个例子here。

但是，我建议的是在wrap类中设置高度。

.wrap {
  position: relative;
  height: 300px;
  width: 70%;
  background-color: white;
  left: 15%;
}

这将显示第二种背景颜色，如预期的那样：）

我创造了一个展示这个here的小提琴。

希望这有帮助！

Answer 2

当你绝对定位.local时，它会将其从流程中移除。有了它，.wrap内部没有任何内容，因此它会折叠到0的高度。由于.wrap的高度为0，.local不在流量body内部没有任何内容，因此它也会崩溃到0的高度。

使用百分比将元素的height设置为其包含元素的百分比。如果一切都崩溃了，那就没有什么比这更好了。

如果您希望body占据整个屏幕的高度，可以考虑使用vh calculated based on the viewport height的值。

我相信您将body样式更新为：

body{
    height: 100vh;
    min-width:100%;
    font-family: 'Open Sans', sans-serif;
    background-color: gray;
}

将为您提供您期望的结果，因为它将身体的高度定义为相对于视口的某个东西，而后者又为.local提供了一定百分比。

我的相对Div不会显示背景颜色或图像

2 个答案: