Menu
I'm trying to split a page into two equal areas, with each taking up 100% of the page height, and 50% of the page width.
However, this is resulting in an annoying whitespace at the bottom of the page, which also then leads to an annoying scroll bar on the whole page.
Normally, I'd use my browser's DOM inspector to find what is causing unwanted space, but it is of no use here, since the whitespace appears to be located outside of the html tag (?!).
The HTML is as follows (everything outside of body omitted for clarity)
<body><div id="box1"></div><div id="box2"></div></body>
The CSS is as follows:
* { box-sizing: border-box; border: 1px solid red; }
html, body {
margin: 0;
padding: 0;
height: 100%;
}
div {
display: inline-block;
}
#box1 {
height: 100%;
width: 50%;
background-color: blue;
}
#box2 {
height: 100%;
width: 50%;
background-color: green;
}
I've also created a JSFiddle, which manages to replicate the problem.
I came across this question that seems similar, but none of the answers there explain why this is occurring (this answer does offer an explanation for when img tags are present) and all of the fixes seem like hacks or workarounds.
Edit: In response to the comment (that seems to have disappeared), the problem is replicated in the Fiddle in Firefox 49.02 and Edge 38.14393.0.0 on Windows 10. It also occurs in Chrome 54.0.2840.71, but it is less noticeable (and the scroll bar doesn't seem to move if I have the window maximised).
838
I'm sure some people will add to this but here's my understanding...
You have div {display: inline-block;}. Inline blocks are kind of like a block but treated as text, so line height matters. If you update the first line of your CSS to...
* { box-sizing: border-box; border: 1px solid red; line-height: 0;}
...the whitespace will go away. Play around with line-height in your fiddle to change the amount of white space you have. Values 14px and up started adding whitespace for me.
69
Just Add overflow:hidden in body tag css.
* { box-sizing: border-box; border: 1px solid red; }
html, body {
margin: 0;
padding: 0;
height: 100%;
overflow:hidden;
}
div {
display: inline-block;
}
#box1 {
height: 100%;
width: 50%;
background-color: blue;
}
#box2 {
height: 100%;
width: 50%;
background-color: green;
}<body><div id="box1"></div><div id="box2"></div></body>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
