html - Why does vw include the scrollbar as part of the viewport? -
i'm trying build website has lots of boxes of equal width , height. example, have page has 2 equal size boxes side side.
the simple solution set width , height 50vw. works great until there scroll bar. i've googled around hours , can't understand why on earth vw , vh include scrollbars part of viewport.
here's sample of issue
html
<div class="container"> <div class="box red"></div> <div class="box green"></div> </div> <div class="lotta-content"></div> css
body { margin: 0; padding: 0; } .container { width: 100vw; } .box { float: left; width: 50vw; height: 50vw; } .red { background-color: red; } .green { background-color: green; } .lotta-content { height: 10000px; } notice unwanted horizontal scrollbar
https://jsfiddle.net/3z887swo/
one possible solution use percentages widths, vw height, won't ever perfect box isn't worst thing in world, still not ideal. here's sample
https://jsfiddle.net/3z887swo/1/
does know why vw/vh include scrollbars part of viewport? also, if has better solution own, i'd love hear it. i'm looking pure css solution. rather not have javascript.
it convenient if viewport units didn't include scrollbars display size (screen) after all. have @ solution pseudo element though:
http://www.mademyday.de/css-height-equals-width-with-pure-css.html
makes square in example well:
https://jsfiddle.net/3z887swo/4/
.box { float: left; width: 50%; } .box::before { content: ""; display: block; padding-top: 100%; } edit - if wondering why works (vertical padding responding original element's width)... that's how it's defined in specification:
the percentage calculated respect width of generated box's containing block, 'padding-top' , 'padding-bottom'.