Box 100vh dosen't take the whole page

Question

I have 3 boxes inside a container and I'm trying to have the same height for each box but the height 100vh or height : 100% one doesn't work correctly. Do you have any idea why? I tried on a different browser and OS and I still have the same result. The Green box doesn't reach the height desired.

/* ALL SETTINGS */

* {
  margin: 0;
  padding: 0;
  -webkit-box-sizing: var(--size-box);
  -moz-box-sizing: var(--size-box);
  box-sizing: var(--size-box);
}

html,
body {
  margin: 0;
  height: 100%;
}




.wrapper {

  max-width: 100%;
  height: 100vh;
}

.wrapper .box {
  width: 100%;
  height: 100vh;
}

.box:nth-child(1){
  background-color: blue
}

.box:nth-child(2){
  background-color: green
}

.box:nth-child(3){
  background-color: red
}

<html>
  <body>

    <div class="wrapper">
         <div class="box">
          </div>
         <div class="box">
          </div>
         <div class="box">
         </div>
    </div>
  </body>
</html>

For me not . I keep to see a red line of third box exceeds up on second — Xendrive93, Dec 17 '18 at 10:16
It's working fine in the code you shared, maybe some other code you are using is causing the problem ? — Jake, Dec 17 '18 at 10:16
@jake i try to put the pic for understand why dosen't work to me — Xendrive93, Dec 17 '18 at 10:18

score 0 · Accepted Answer · answered Dec 17 '18 at 10:26

0

What about this one? Adding 33% width to boxes and making them inline-block aligns them horizontally. I removed the rule * because it is too aggressive. Using too aggressive rules without clear intention seems bad practice.

html,
body {
  margin: 0;
  height: 100%;
}

.wrapper {
  max-width: 100%;
  height: 100vh;
  padding: 0;
}

.wrapper .box {
  width: 33%;
  height: 100vh;
  display: inline-block;
  margin: 0;
}

.box:nth-child(1){
  background-color: blue
}

.box:nth-child(2){
  background-color: green
}

.box:nth-child(3){
  background-color: red
}

answered Dec 17 '18 at 10:26

Sami Altundag

238
2
6

Yep!!! If i remove and add "inlie-block" i can get the all exceed space. Is already a step. But i keep to not understand why dosen't get correctly all space if are all near – Xendrive93 Dec 17 '18 at 10:32
btw your answer has half solved my problem. That "*" effetctively was too bad. – Xendrive93 Dec 17 '18 at 11:02
Because every tag has default style properties. For DIV, the default value of the 'display' property is 'block' which means DIV is displayed as block. I think this link will give you enough info https://stackoverflow.com/questions/3099030/displayinline-vs-displayblock. I will edit the answer if this answers your question. Thank you. – Sami Altundag Dec 17 '18 at 11:44

Box 100vh dosen't take the whole page

1 Answers1