高度 100%

【问题标题】：How to give a child div width/height 100% if the parent's div is also 100% width/height如果父母的 div 也是 100% 宽度/高度，如何给子 div 宽度/高度 100%
【发布时间】：2014-11-30 04:50:05
【问题描述】：

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

【问题讨论】：

标签： html css height

【解决方案1】：

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

_{（这显然假设您希望元素是视口的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

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

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

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

【讨论】：