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

Question

我无法理解为什么我的相关 div (.wrap) 不会显示其 css 定义的背景颜色或图像。主体有自己的背景，.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>

Answer 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;
} 

会给你你期望的结果，因为它将 body 的高度定义为相对于视口(viewport)的东西，这反过来又给 .local 一些东西作为百分比。