相关疑难解决方法(0)

我刚刚了解了一个新的,不常见的CSS单元.vh并分别vw测量视口高度和宽度的百分比.

我从Stack Overflow看了这个问题,但它使单位看起来更相似.

vw和vh单元如何工作

答案具体说明了

vw和vh分别是窗口宽度和高度的百分比:100vw是宽度的100%,80vw是80%等.

这看起来与%单位完全相同,这更常见.

在Developer Tools中,我尝试将值从vw/vh更改为%而反之亦然,并获得相同的结果.

这两者有区别吗？如果没有,为什么要引入这些新单位CSS3？

说你有这个:

html, body {margin: 0; padding: 0}
.box {width: 100vw; height: 100vh}

<div class="box">Screen 1</div>

你会得到一些填充屏幕的东西,没有滚动条.但添加另一个:

<div class="box">Screen 1</div>
<div class="box">Screen 2</div>

您不仅可以获得垂直滚动条(预期),还可以获得轻微的水平滚动条.

我意识到你可以省略宽度,或者将其设置为宽度:100%,但我很好奇为什么会发生这种情况.是不是100vw应该是"100%的视口宽度"？

我哥哥和我早先在崇高中乱搞,他突然喊道:"我学到了新东西!"

有点震惊,我问道,"那是什么......？"

他回答说,"视口高度!我在IE6开始的时候没有得到完全支持,再也没有真正看过它了." 然后他继续给我看.

我回答说:"我在这里完成了同样的事情." 并向他展示了另一个我搞砸了的沙盒项目.

在我的项目中,在CSS中,我写道

(编辑:我编辑将背景颜色放在div中,而不是html或正文,我的错误)

(jsfiddle http://jsfiddle.net/nvLq8eg9/embedded/result/)

html, body {
    height: 100%;
}

div {
    height: 100%;
    background: green;
}

他的代码是,(jsfiddle http://jsfiddle.net/nvLq8eg9/1/embedded/result/)

div {
    height: 100vh;
    background: green;
}

两者都做了几乎相同的事情.在这里做了一些研究后,似乎通过前一种方法发出的常见问题是无法滚动; 但是,在我的沙箱项目中,我有更多的内容,并能够正常滚动和与网站交互.

我们都没有能够确定两种方法之间的差异.这里的任何人都可以教育我们吗？

谢谢!

如果元素设置为width: 100vw;并且存在垂直滚动条,则元素的宽度将等于视口加上滚动条的宽度.

有可能阻止这种情况吗？

是否可以在不禁用整个页面的水平滚动的情况下防止这种情况？除了改变我的css/markup以使元素100%的宽度,我无法想到任何东西.

在Windows 8.1上经过Chrome版本43.0.2357.81 m&FF 36.0.1和Opera 20.0.1387.91测试

这是所要求的代码:

例

HTML

<div class="parent">
    <div class="box"></div>
</div>
<div class="tall"></div>

CSS

body { margin: 0; }
html { box-sizing: border-box; }
*, *::before, *::after {
    box-sizing: inherit;
    position: relative;
}
.parent {
    background: rgba(0, 0, 0, .4);
    height: 100px;
    width: 5rem;
    margin-bottom: 25px;
}

.box {
    position: absolute;
    top: 0;
    left: 0;
    background: rgba(0, 0, 0, .4);
    height: 50px;
    width: 100vw;
}

.tall {
    height: 100rem;
}