Question

像这样的空div：

<div class="section" id="s">  </div>

将与屏幕大小相同。

但是，如果我在其中放置另一个空div，则此section div高度将为0，或者将处于孩子内容的高度。

  <div class="section" id="s">

                <div class="Back"> </div>           
</div>

将使该节的高度为0，除非我在Back内放置一些东西，这将使该节的高度= openBack的内容。

无论内部发生什么，我都需要将部分的尺寸设置为屏幕尺寸，但我做不到。

CSS：

html {
    height: 100%;
}

body {
  min-height: 100vh;
}


.section {
    height: 100%;
    width: 100%;
} 

  .Back {
  background-image:url("/images/bg.png");
  width: 100%;
  height: 100%;
  background-size: cover;
  justify-content: center;
  align-items: center;


}

如何设置部分大小以保持屏幕大小不变？

Answer 1

注意：我正在回答original question

您可能想尝试一下：

position: absolute;
top: 0; right: 0; bottom: 0; left: 0;
border: 1px solid black;
display: block;

将能够覆盖父级div。

检查以下fiddle或代码段：

.hidden{
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
    border: 1px solid black;
    display: block;
    background-color: rgba(254,204,254,0.5);
    align-items: center;
    flex-direction: column;
}

div.openBack {
    position:relative;
    border:1px dashed red;
    display:flex;
    justify-content:center;
    align-items:center;
    overflow:hidden
}
div.openBack img {
    flex-shrink:0;
    min-width:100%;
    min-height:100%
}

<div class=openBack style="width:100px; height:200px">
    <img src="http://upload.wikimedia.org/wikipedia/commons/thumb/5/55/Mona_Lisa_headcrop.jpg/36px-Mona_Lisa_headcrop.jpg">
    <div class="hidden"></div>
</div>

Answer 2

在CSS下方尝试-

    .openBack{ position:relative;}


.hidden{
      position:absolute;
      top:50%;
      left:50%;
      transform: translate(-50%, -50%);
      z-index:9999;

}

Answer 3

要将图像用作节或div的背景，则不希望将该图像作为元素包括在内。它会将其他元素推开，这就是为什么下一个div被推到它下面的原因。而且，通过使用绝对位置来使它表现良好将比需要的更为复杂。

我建议将图像作为background-image附加到您所在部分的类或ID，然后从html中删除<img>元素。

要么：

.openBack {
    background-image: url("/folder/file.png");
}

或

#one {
    background-image: url("folder/file.png");
}

您将要查找CSS'background-image的属性，以使其按比例缩放并适合您想要的确切方式。

而且您不能在ID的开头使用数字值。

希望这会有所帮助！

Answer 4

这可以通过以下方式实现：

html { 
  background: url(images/bg.jpg) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

有关更多详细信息和修改，请Check this..

Answer 5

感谢所有答案，我发现解决方案非常简单（愚蠢）。

内部div结束标记是错误的<div>而不是</div>，后者弄乱了结构。希望我有一个发现这种错误的工具。

为什么div受到孩子的影响？

5 个答案:

注意：我正在回答original question