我的相对 div 不会显示背景颜色或图像答案

【问题标题】：My Relative Div will NOT display a background color or image我的相对 div 不会显示背景颜色或图像
【发布时间】：2017-01-19 08:23:52
【问题描述】：

我很难理解为什么我的相对 div (.wrap) 不会显示其 css 定义的背景颜色或图像。 body 有自己的背景， .wrap 为 div 及其内容创建一个新背景。（.local 是我试图让 .wrap 为其创建背景的绝对 div，因为它是我需要从 .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>

【问题讨论】：

您需要将 z-index 属性添加到 .wrap 类中，如下所示： .wrap{z-index:99999999} 或本地类。玩这个属性。我相信这就是你的解决方案。
刚刚试了，没用prntscr.com/dxfosy这里有一个链接，即使在添加 z-index 之后，我也能看到它的样子……包含“这是一个测试段落”在 .local div 内，它后面不显示在 .wrap div 中定义的白色背景

标签： html css

【解决方案1】：

当您绝对定位.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一个百分比。

【讨论】：

【解决方案2】：

你的问题是你的wrap 类（除了你的local 类实际上没有高度。你在你的身体中指定一个min-height: 100%，但由于身体没有固定高度的父母，那不会' t确实做过任何事情;)

您真正要寻找的是 height: 100vh 在 body 上，以确保它占据页面高度的 100%。一个例子可以在here找到。

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

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

正如预期的那样，这将调出第二种背景颜色:)

我创建了一个小提琴来展示这个here。

希望这会有所帮助！

【讨论】：

好的，所以body的高度，不能用%，必须用px来定义高度？
您不能为 body 设置基于百分比的高度，因为 body 没有父级。这就像要求 0 的 XX% - 它永远是 0 ;) 我已经更新了我的答案以涵盖这个:)