I see whitespace between the div's border and the nav in chrome only at a specific screen size. I also see it in the fiddle so I don't have any extra code. Also same happens in the snippet, I see the white space only when I expand it to full page.
*{
padding: 0;
margin: 0;
font-size: 0;
line-height: 0;
}
div{
min-height: 100vh;
border: 0.5vw solid red;
width: 100%;
box-sizing: border-box;
}
nav{
background: black;
height: 11vh;
}<div>
<nav>
</nav>
</div>The problem is this:
border: 0.5vw solid red;
and that doesn't give you a whole number as such it anti-alias the border with the white DIV and what you are likely be seeing is more orange than white.
I've come up with a hack by having 2 separate divs one for the nav and that div background is black so your border is anti-alias to black rather than white.
Fiddle: http://jsfiddle.net/dg45wfc8/
*{
padding: 0;
margin: 0;
font-size: 0;
line-height: 0;
}
.content-div {
min-height: calc(((100vh - 11vh) - 0.5vw));
border: 0.5vw solid red;
width: 100%;
box-sizing: border-box;
border-width: 0 0.5vw 0.5vw 0.5vw;
border-style: solid;
border-color: red;
}
nav{
background: black;
height: 11vh;
}
.nav-div {
border-width: 0.5vw 0.5vw 0 0.5vw;
border-style: solid;
border-color: red;
background: black;
}<div class="nav-div">
<nav>
</nav>
</div>
<div class="content-div">>
</div>You can add margin-top:-1px to remove the white space coming under the div with border. I used this to fix my white space issue, it works!
<div> test </div>
div{
border: 3px solid #FB982E;
margin-top: -1px;
}
The problem is with the unit vw you are using in it. When I changed it to the px the white gap gets eliminated.
*{
padding: 0px;
margin: 0px;
font-size: 0px;
line-height: 0px;
}
.div{
border: 5px solid red;
width: 100%;
box-sizing: border-box;
}
nav{
background: black;
height: 11vh;
}<div class="div">
<nav>
</nav>
</div>