相关疑难解决方法(0)

我必须在屏幕高度上安装iframe.显然,我想要100%的宽度,但由于这不起作用,我使用了100vh.但是vh像vw并不完全是100%.在我的笔记本电脑通过镀铬,而100%宽度完美呈现,而不需要水平滚动条,大众额外约1厘米.

如果元素设置为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;
}

我正在尝试建立一个有很多宽度和高度相同的盒子的网站.例如,我有一个页面,它有两个相同大小的框并排.

简单的解决方案是将宽度和高度设置为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解决方案.我宁愿没有javascript.

我从这里拿了代码.代码运行良好但是当我添加一个额外div的包装div类时fullwidth,图像高度不会根据屏幕的高度平均缩放.

这就是它最初的样子:

body,
html {
  height: 100%;
}

.fullwidth {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.repeat-x {
  flex: 1;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
}

.bg-1 {
  background-image: url(http://oi65.tinypic.com/28v4p6u.jpg);
}

.bg-2 {
  background-image: url(http://oi65.tinypic.com/28v4p6u.jpg);
}

.bg-3 {
  background-image: url(http://oi65.tinypic.com/28v4p6u.jpg);
}

<div class="fullwidth">
  <div class="repeat-x bg-1">&nbsp;</div>
  <div class="repeat-x bg-2">&nbsp;</div>
  <div class="repeat-x bg-3">&nbsp;</div>
</div>

fullwidth用另一个包装后div: -

body,
html {
  height: 100%;
}

.fullwidth {
  display: flex;
  flex-direction: …

1vw = 1%,如果它们100%可互换,为什么它们都存在？我觉得%取决于包装标签的大小,但无论包装标签的大小如何,vh总是依赖于窗口大小.谢谢,

我想知道如何计算的价值vh和vw.我正在设计一个使用2vw它的网站,它完美地用于我的文本.但是,我猜对了.请告诉我这些装置是如何工作的,以便我将来可以使用它们.我也想知道他们是否有跨浏览器支持.