如果父级 div 也是 100% 宽度/高度，如何给子级 div 宽度/高度 100%

我想要两个宽度和高度均为 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');
}

您使用视口相对值并给元素一个min-height of 100vh. （例子） http://jsfiddle.net/azekwvpz/

_{(This obviously assumes you are wanting the element to be 100% of the viewport and not the parent element)}

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

5.1.2.视口百分比长度：‘vw’、‘vh’、‘vmin’、‘vmax’单位 http://www.w3.org/TR/css3-values/#viewport-relative-lengths

视口百分比长度与初始包含块的大小相关。当初始包含块的高度或宽度更改时，它们会相应地缩放。

或者，您可以设置高度html元素到100%并改变.container元素的min-height to a height. （例子） http://jsfiddle.net/ah6evmzr/

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