Question

我有一个父母和孩子的div：

<div class="wrapper">
    <div class="child">
        Foo Bar!
    </div>
</div>

wrapper div的高度可以变化，具体取决于内容，但是它具有min-height: 50vh。现在，我希望子div覆盖整个父div，但是height: 100%不起作用。

Here is a JSFiddle demo。目标是用蓝色覆盖整个灰色区域。我该怎么做呢？

Answer 1

flexbox可能会有帮助。

将这些代码添加到.wrapper：

display: flex;
align-items: stretch;

删除height并向孩子添加width。

.wrapper {
  background-color: grey;
  min-height: 50vh;
  display: flex;
  align-items: stretch;
}

.child {
  width: 100%;
  background-color: blue;
  color: white;
}

<div class="wrapper">
  <div class="child">
    Foo Bar!
  </div>
</div>

Answer 2

您可以简单，最简单的方式是在display: flex上使用width: 100%和.child。

Flex 在所有现代浏览器中都非常responsive。您可以阅读有关flex box here
的更多信息

演示

html,
body {
  height: 100%;
}

.wrapper {
  background-color: grey;
  min-height: 50vh;
  display: flex;
}

.child {
  width: 100%;
  background-color: blue;
  color: white;
}

<div class="wrapper">
  <div class="child">
    Foo Bar!
  </div>
</div>

div以最小高度覆盖父div

2 个答案: