Menu
I have some really simple html/css that uses 100vh on a body tag, and 100% (or 100vh, I've tried both) on two inline block span's, each span of which has a width of 50vw. I expect to see both spans side by side, each taking up half the screen, and each as tall as the screen - no scrollbars, no white space. Body also has a margin of 0 to help with this. What I see is what I expected except that there is a small vertical scroll bar. I also removed all whitespace from inside the body, as I know this can add space beyond the 100% width. But I can't figure out why I get the scrollbar... I know I can just add an overflow: hidden to body and the scrollbar goes away, but again - why the scrollbar in the first place?
Here is the html file:
<!DOCTYPE html>
<html>
<head>
<title>Insert title here</title>
<style>
body {
height: 100vh;
margin: 0;
}
span {
height: 100%;
width: 50%;
display: inline-block;
}
#left {
background-color: red;
}
#right {
background-color: green;
}
</style>
</head>
<body><span id="left"></span><span id="right"></span></body>
</html>
944
Unfortunately that's the nature of inline elements. You need to add vertical-align:top to force no line height and other font related spacing.
body {
height: 100vh;
margin: 0;
}
span {
height: 100%;
width: 50%;
display: inline-block;
vertical-align: top;
}
#left {
background-color: red;
}
#right {
background-color: green;
}<span id="left"></span><span id="right"></span>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
