html - 如果 parent 的 div 也是 100% 宽度/高度，如何给 child 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');
}

Answer 1

您使用视口(viewport)相对值并为元素指定 100vh 的 min-height。 (example)

_{(这显然假设您希望元素是视口(viewport)的 100% 而不是父元素)}

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

5.1.2. Viewport-percentage lengths: the ‘vw’, ‘vh’, ‘vmin’, ‘vmax’ units

The viewport-percentage lengths are relative to the size of the initial containing block. When the height or width of the initial containing block is changed, they are scaled accordingly.

或者，您可以将 html 元素的高度设置为 100% 并更改 .container 元素的 min-height 到 高度。 (example)

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