为什么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％; 
} 
  

编辑 - 如果有人想知道为什么会这样工作元素的宽度）...这基本上是如何在规范中定义的：

百分比是相对于生成框的宽度

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屋！