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.
4
Answers
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.If spelled correctly box-sizing will be applied to the specified element. What made your example overflow however was the 5px border added two(!) times, once to the body, once to the html tag.
Here is a working example without overflow:
you misspelled box
sizining
the reason it’s overflowing is because your body tag has a border
you can use the
calc()
css function to remove the excess height caused by the border: like so ->the
calc()
function can be used to perform calculations on css units, make sure there is a space before and after the mathamatical operatorif you need me to clarify or if i misunderstood your question, please let me know in the comments
There are some things that need to be understand. Here is the updated code:-