如果父级div宽度/高度也为100%，如何将子级div的宽度/高度设置为100%？

Question

我想要两个宽高都为100%的div。我知道子div不会起作用，因为父div没有特定的高度，但有没有办法解决这个问题？

HTML：

<div class="container">
      <div class="child-container">
      </div>
</div>

CSS（层叠样式表）：

body
{
      width: 100%;
      height: 100;
}

.container
{
      position: relative;
      min-width: 100%;
      min-height: 100%;
      background-image: url('http://www.earthbusinessdirectory.com/web/images/london.jpg');
}

.child-container
{
      position: relative;
      min-width: 100%;
      min-height: 100%;
      background-image: url('/images/black.png');
}

- T94

Answer 1

您可以使用视口相对值，并为元素设置min-height为100vh。(示例) _{（这显然假设您希望该元素占用视口的100％，而不是父元素）}

.child-container {
    position: relative;
    min-width: 100%;
    min-height: 100vh;
    background-image: url('/images/black.png');
}

5.1.2. 视口百分比长度：vw、vh、vmin、vmax单位

视口百分比长度是相对于初始包含块的大小而言的。当初始包含块的高度或宽度改变时，它们会相应地进行缩放。

另外，您可以将 html 元素的高度设置为 100%，并将 .container 元素的 min-height 改为 height。（示例）

html, body {
    height: 100%;
}
.container {
    position: relative;
    min-width: 100%;
    /* min-height: 100%; */
    height: 100%;
}

- Josh Crozier