How to add percentage-of-height top/bottom margin in CSS

Question

What happen if a client wants a pixel perfect design, or in this case "percent perfect" like this example?

The full container is 100% height, so the sum of all divs and spaces results in 100% height.

The problem here is that i tried to add the spaces using margin-bottom in divs but realized that the percent margins don't represent the desired value inside the full container of 100% height.

The only solution that I know is using divs with % height instead of margins. But i want to do a cleaner html. Is there another alternative for this?

Additional info: I am using phonegap + ionic, is a mobile design.

Answer 1

First you will have to set the root element to height:100vh

Then use :nth-child to set the height and the margin of each divs

*{box-sizing: border-box}
:root{width: 100vw; height: 100vh; text-align: center}
body{padding: 0; margin:0}
div{
  display: block;
  background: #333;
  width: 480px;
}

div:first-child, div:nth-child(2){
  height: 15vh;
  margin: 0 0 2.5vh 0
}

div:nth-child(3){
  height: 20vh;
  margin: 0 0 5vh 0
}

div:nth-child(4){
  height: 30vh
}

<div></div>
<div></div>
<div></div>
<div></div>