Question 167452 in Html Question posted in
Some basic documentation can be found here.

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

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.

Tags:

4

Answers


  1. 0

    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.

    Login or Signup to reply.
  2. 0

    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:

    body,
html {
  margin: 0px;
  padding: 0px;
  height: 100vh;
}

div.a {
  height: 100%;
  margin: 0px;
  padding: 0px;
  border: 5px solid black;
  box-sizing: border-box;
  background-color: blue;
}
    <div class='a'></div>
    Login or Signup to reply.
  3. 0

    you misspelled box sizining

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

    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 ->

    body, html
{
   margin: 0px;
   padding: 0px;
   height: calc(100vh - 5px) <- remove the thicknes of the border from the height ;
   border: 5px solid black;
   box-sizing: border-box;
 }

    the calc() function can be used to perform calculations on css units, make sure there is a space before and after the mathamatical operator

    if you need me to clarify or if i misunderstood your question, please let me know in the comments

    Login or Signup to reply.
  4. 0

    There are some things that need to be understand. Here is the updated code:-

    body{
  margin: 0px;
  height: 100vh;
  box-sizing: border-box;
  border: 5px solid black;
}

div.a {
  height: 100%;
  margin: 0px;
  padding: 0px;
  background-color: blue;
}
    <div class='a'></div>
    1. In your case, as the border of 5px width and height are also added in the element. So with box-sizing property on body, the border is also included in the width and height of the element.
    2. Secondly there is no need of padding: 0px, as by default there is no padding in the html and body elements.
    3. Lastly don’t use height of 100vh on html and body combine. If you want full height, then apply the height of 100vh only on body element.
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search