如标题中所述,是否可以vw
仅在CSS中计算没有滚动条的?
例如,我的屏幕宽度为1920px
。vw
回报1920px
,很好。但我的实际身体宽度只有像1903px
。
有没有办法让我1903px
仅使用css检索值(不仅适用于的直接子项body
),还是为此我绝对需要JavaScript吗?
如标题中所述,是否可以vw
仅在CSS中计算没有滚动条的?
例如,我的屏幕宽度为1920px
。vw
回报1920px
,很好。但我的实际身体宽度只有像1903px
。
有没有办法让我1903px
仅使用css检索值(不仅适用于的直接子项body
),还是为此我绝对需要JavaScript吗?
width: calc(100vw - scrollbarWidth)
其中“ scrollbarWidth”是一些固定值,例如15px
Answers:
一种方法是使用calc。据我所知,100%是包括滚动条的宽度。因此,如果您这样做:
body {
width: calc(100vw - (100vw - 100%));
}
您将获得100vw减去滚动条的宽度。
如果您想要一个正方形,例如,它是视口的50%(减去scollbar宽度的50%),则也可以使用高度进行此操作
.box {
width: calc(50vw - ((100vw - 100%)/2))
height: 0
padding-bottom: calc(50vw - ((100vw - 100%)/2))
}
body
元素,或者元素的宽度与相同body
(否则100%
将引用错误的元素的宽度)时,此选项才有效。在这种情况下,您可以简单地使用百分比。除非我想念什么?
100vw - (100vw - 100%) = 100vw - 100vw + 100% = 100%
我想念什么吗?
我这样做是通过在文档加载后添加一行javascript来定义CSS变量:
document.documentElement.style.setProperty('--scrollbar-width', (window.innerWidth - document.documentElement.clientWidth) + "px");
然后在CSS中,您可以使用var(--scrollbar-width)
/不使用宽度不同的滚动条,针对不同的浏览器进行所需的任何调整。你可以做,如果需要的水平滚动条类似的东西,代替innerWidth
用innerHeight
和clientWidth
用clientHeight
。
根据规范,视口相对长度单位不考虑滚动条(实际上,假定它们不存在)。
因此,无论您的预期行为是什么,使用这些单元时都无法考虑滚动条。
vw
根据规范,尚不知道任何滚动条的存在。因此,您不能考虑它们。
overflow-y: scroll
vsoverflow-y: auto
似乎并没有改变vw单位的计算值。具体来说,我在网站上设置了3.82vw,计算机的宽度为1920px。使用自动溢出功能,3.82vw = 73.344px,然后我尝试使用溢出滚动,它也发出了73.344px,没有变化,如果您正确的话,它实际上应该发出72.6946px
我发现它可以正常工作而又不会使代码与“ calc”混淆的唯一方法是将容器元素的大小设置为100vw。在容器周围添加一个包装,以防止溢出-x;这将使容器变为全角,就像滚动条位于内容上方一样。
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
html{ overflow-y: scroll; }
html, body{ padding:0; margin: 0;}
#wrapper{ overflow-x: hidden; }
.row{ width: 100vw; }
.row:after{ clear: both; content: ''; display: block; overflow: hidden; }
.row-left{ background: blue; float: left; height: 40vh; width: 50vw; }
.row-right{ background: red; float: right; height: 40vh; width: 50vw; }
</style>
</head>
<body>
<div id="wrapper">
<div class="row">
<div class="row-left"></div>
<div class="row-right"></div>
</div>
</div>
</body>
</html>
如果情况类似于滑块:如许多答案中所述,宽度100%不会考虑滚动条,而100vw会考虑。如果有许多元素需要占用窗口的宽度,并且已经嵌套在已经具有100%窗口宽度(或者其自然块宽度就是这样)的容器内,则可以使用:
在我的情况下,我有一个设置div 100wh-230px,我也面临着同样的问题,我的额外滚动宽度是:
width: calc(100vw - (100vw - 100%) - 230px);
这不是我的解决方案,但可以帮助我创建下拉式全角菜单,相对元素中的绝对值在不全范围内。
我们应该在:root的css var中滚动,然后使用它。
:root{
--scrollbar-width: calc(100vw - 100%);
}
div { margin-right: var(--scrollbar-width); }