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

您使用视口相对值，并为元素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%;
}

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

1 个答案: