CSS: Setting height relative to current height of parent element

Question

So my question is basicly stated in the topic. Why can't I just say:

<div style="min-height: 100vh">
    <div style="height: 100%">
    </div>
</div>

If I do this, the second div does not scale to 100% of the first one.

It's explained here https://stackoverflow.com/questions/7049875/why-doesnt-height-100-work-to-expand-divs-to-the-screen-height — user227353, Oct 22 '21 at 16:29

score 1 · Answer 1 · answered Oct 22 '21 at 16:01

1

Just replace "min-height" with height.

<div style="height: 100vh">
    <div style="height: 100%">
    </div>
</div>

answered Oct 22 '21 at 16:01

Slidein

265
2
9

score 0 · Accepted Answer · answered Oct 22 '21 at 16:37

Here's another way to accomplish your goal using flex.

This...

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

... is used to establish a starting point for all elements. It is useful here because it gets rid of the vertical scroll caused by the default margins that accompany the <body> tag.

This...

html, body {
  height: 100%;
}

... provides the necessary established height which will cascade down to your child elements to allow them to achieve 100% height.

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html, body {
  height: 100%;
}

.outerDiv {
  display: flex;
  height: 100%;
  border: 4px solid red;
}

.innerDiv {
  height: 100%;
  width: 100%;
  border: 4px solid blue;
}

<div class="outerDiv">
  <div class="innerDiv">
    test
  </div>
</div>

score -1 · Answer 3 · answered Oct 22 '21 at 16:04

-1

Replace min-height by height in the first div

answered Oct 22 '21 at 16:04

Luhaib-j

79
7

CSS: Setting height relative to current height of parent element

3 Answers3