Home Why does a 100% div overflow its parent (body, html) when its box-sizing is set to border-box?

Questions

Why does a 100% div overflow its parent (body, html) when its box-sizing is set to border-box?

May 11, 2023

I have the following CSS configuration

body,
html {
  margin: 0px;
  padding: 0px;
  height: 100vh;
  border: 5px solid black;
}

div.a {
  height: 100%;
  margin: 0px;
  padding: 0px;
  box-sixing: border-box;
  background-color: blue;
}

<div class='a'></div>

When I display the div.a, it overflows the body, especially after setting the div’s box-sizing to border-box. Why?

After displaying the div.a, it overflowed it’s parent (body, html) and I was expecting it not to overflow after setting the div’s box-sizing to border-box although I don’t a border set on the div.a element.

>Solution :

The point is, in simple terms, you give the <html> a height of 100vh and then add a border. Now the top edge of the <body> starts at 5px high. Now you set the <body> to 100vh as well, but since the <body> starts 5px from the top, it extends 5px below the browser’s viewport.

You don’t need to style the <html> tag, you can just give the <body> 100vh and a 10px (or how much do you need) border for it.