0

If I set the below CSS:

html,
body {
  min-height: 100vh;
}

.container {
  height: 100%;
}
<div class="container">
  Hello
</div>

the container does not fill the full height area but if i change the min-height: 100vh with height:100vh it works ! Why does this happen?

Rachel Gallen
  • 27,943
  • 21
  • 72
  • 81
Manos Kanellopoulos
  • 43
  • 1
  • 7

2 Answers2

0

If you set the container to 100%, the container will size only to fit to 100% of the height of the contents of what's in the container div.

100vh sets the container to 100 vertical height, where vertical height is the full height of the page.

Hope this helps you understand the difference

html,
body {
  min-height: 100vh;
}

.container {
  height: 100%;
  border:1px solid red;
}
<div class="container">
  Hello<br> How are you?
</div>

html,
body {
  min-height: 100vh;
}

.container {
  height: 100vh;
  border:1px solid red;
}
<div class="container">
  Hello<br> How are you?
</div>
Rachel Gallen
  • 27,943
  • 21
  • 72
  • 81
  • What about min-height: 100vh? Does this set the height of body? – Manos Kanellopoulos Jul 18 '19 at 20:44
  • 1
    Sorry Rachel I though that as the container is child of body and the body has height 100vh from min-height, the height of 100% of the container it will fill all body height – Manos Kanellopoulos Jul 18 '19 at 20:57
  • @ManosKanellopoulos if height was used instead of min-height, the container would be 100vh, but as you may not want this all your child classes to be 100vh (and it would override % heights of classes), you may not want to use this. Yes, min-height sets the height for the body. – Rachel Gallen Jul 18 '19 at 20:57
  • Rachel, this doesn't answer his question. He's asking why the html and body can be set to `min-height: 100vh`, but the child div with `height: 100%` doesn't fill that height. – symlink Jul 18 '19 at 20:59
  • @symlink my answer did address the question, He asked why the difference and I answered. If he wants to investigate inheritance further, well that's his own business. I specifically said that classes would be affected (if he had experimented further he would've discovered the same is not true for ids) – Rachel Gallen Jul 18 '19 at 21:03
  • My question is that @symlink mention but yes Rachel you have right for the ids!! – Manos Kanellopoulos Jul 18 '19 at 21:09
  • @RachelGallen see Benjamin's answer, the question is about a bug in Webkit. – symlink Jul 18 '19 at 21:09
  • Benjamin I did not know that is a bug!!!! – Manos Kanellopoulos Jul 18 '19 at 21:09
  • @symlink it's not a bug at all, it's a logical behavior .. height:100% will fail to auto in the case of using min-height on the parent element because height consider **height** of the parent element no it's min-height. – Temani Afif Jul 19 '19 at 00:27
  • @ManosKanellopoulos *and the body has height 100vh from min-height, the height of 100% of the container it will fill all body height* --> no the body doesn't have a height equal to 100vh but a **min-height**. There is a huge difference. The height of the body is auto and vary between min-height value and the height of the content. If you have a content that is taking more than 100vh the body will have its *computed* height bigger than 100vh – Temani Afif Jul 19 '19 at 00:34
  • Temani Afif I think you have right. That is the correct answer – Manos Kanellopoulos Jul 19 '19 at 08:59
-1

This is a very old bug in Webkit (that is, Chrome and Safari). Bug report here. Ten years old now and no fix, that's wild!

When a block's height is determined by min-height/max-height, children with percentage heights are sized incorrectly

Benjamin
  • 1,372
  • 2
  • 12
  • 20