为什么vw将滚动条作为视口的一部分? [英] Why does vw include the scrollbar as part of the viewport?
问题描述
我想建立一个网站,有许多相同的宽度和高度的盒子。例如,我有一个并排有2个相等大小框的页面。
简单的解决方案是将宽度和高度设置为50vw。这工作伟大,直到有一个滚动条。我已经Google了几个小时,不明白为什么地球上vw和vh将包括滚动条作为视口的一部分。
这里是我的问题的示例
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;
}
注意不必要的水平滚动条
https://jsfiddle.net/3z887swo/
一个可能的解决方案是使用百分比的宽度,但vw的高度,但它不会是一个完美的盒子,这不是世界上最糟糕的事情,但仍然不理想。以下是示例
https://jsfiddle.net/ 3z887swo / 1 /
有没有人知道为什么vw / vh包括滚动条作为视口的一部分?此外,如果有人比我自己更好的解决方案,我很乐意听到。我在寻找一个纯CSS解决方案。
如果视口单元不包括滚动条,屏幕)毕竟。看看这个解决方案与伪元素虽然:
http://www.mademyday.de/css-height-equals-width-with-pure-css.html
在您的示例中也为一个正方形:
https://jsfiddle.net/3z887swo/4/
.box {
float:left;
width:50%;
}
.box :: before {
content:;
display:block;
padding-top:100%;
}
编辑 - 如果有人想知道为什么会这样工作元素的宽度)...这基本上是如何在规范中定义的:
百分比是相对于生成框的宽度包含padding-top和padding-bottom。
http://www.w3.org/TR/CSS2/box.html#padding-properties
I'm trying to build a website that has lots of boxes that are of equal width and height. For example, I have a page that has 2 equal size boxes side by side.
The simple solution was to set the width and height to 50vw. This works great until there is a scroll bar. I've Googled around for hours and can't understand why on earth vw and vh would include the scrollbars as part of the viewport.
Here's a sample of my 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 the unwanted horizontal scrollbar
https://jsfiddle.net/3z887swo/
One possible solution would be to use percentages for the widths, but vw for the height, but it won't ever be a perfect box which isn't the worst thing in the world, but still not ideal. Here's a sample
https://jsfiddle.net/3z887swo/1/
Does anyone know why vw/vh include scrollbars as part of the viewport? Also, if someone has a better solution than my own, I'd love to hear it. I'm looking for a pure CSS solution. I rather not have javascript.
It would be convenient if viewport units didn't include scrollbars but it is the display size (screen) after all. Have look at this solution with a pseudo element though:
http://www.mademyday.de/css-height-equals-width-with-pure-css.html
Makes for a square in your example as well:
https://jsfiddle.net/3z887swo/4/
.box {
float: left;
width: 50%;
}
.box::before {
content: "";
display: block;
padding-top: 100%;
}
Edit - if anyone is wondering why this works (vertical padding responding to the original element's width)... that's basically how it's defined in the specification:
The percentage is calculated with respect to the width of the generated box's containing block, even for 'padding-top' and 'padding-bottom'.
http://www.w3.org/TR/CSS2/box.html#padding-properties
这篇关于为什么vw将滚动条作为视口的一部分?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!