Div cover parent div with min-height

Question

I have a parent and child div:

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

The wrapper div can vary in height, depending on the content, but it has a min-height: 50vh. Now I want the child div to cover the entire parent div, but height: 100% does not work.

Here is a JSFiddle demo. The goal is to cover the entire grey area in blue. How would I go around doing this?

score 1 · Accepted Answer · answered Aug 04 '20 at 01:54

1

flexbox may help.

Add these code to the .wrapper:

display: flex;
align-items: stretch;

Remove height and add width to the child.

.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>

answered Aug 04 '20 at 01:54

Chaska

3,165
1
11
17

Exactly what I was looking for! Thanks – Dennis M Aug 04 '20 at 02:17

score 1 · Answer 2 · answered Aug 04 '20 at 01:56

You can simply and easiest way is to use display: flex and width: 100% on the .child.

Flex is very responsive on all modern browsers. You can read more about flex box here

Demo

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 cover parent div with min-height

2 Answers2