jirkap jirkap - 9 months ago 49
CSS Question

Relation of percent units in css to window size and/or resolution

Why do I have to set the height of div to 88% instead of 94% – (100% - (3% + 3%) padding) and more importantly, why the body (indicated by its background-color), shows up when I make the window smaller? I have two screens with different resolutions and it behaves the same on both of them. I'd like the space to be filled with div but without vertical scrollbar and it should not matter what the size of the window is...



html {
height: 100%;
}

body {
height: 100%;
margin: 0;
background-color: tomato;
}

<div style="padding: 3%; background-color: orange; height: 88%;">
</div>




Answer Source

The padding: 3% means 3% of the width is used for all 4 padding values - in most cases that would be more than 3% of the height - this div won't size properly from one screen to the next.

One solution might be to use box-sizing: border-box:

html {
  height: 100%;
}

body {
  height: 100%;
  margin: 0;
  background-color: tomato;
}
<div style="padding: 3%; background-color: orange; height: 100%; box-sizing: border-box;">
</div>

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download