没有滚动条,是否可以计算视口宽度(vw)?


82

如标题中所述,是否可以vw仅在CSS中计算没有滚动条的?

例如,我的屏幕宽度为1920pxvw回报1920px,很好。但我的实际身体宽度只有像1903px

有没有办法让我1903px仅使用css检索值(不仅适用于的直接子项body),还是为此我绝对需要JavaScript吗?


2
但是...滚动条不包含在视口宽度中!?
Danield

@Danield抱歉,我更新了我的问题
Marten Zander

如果我们谈论的是放置在此处的人工滚动条,那么也许您正在寻找这样的东西:width: calc(100vw - scrollbarWidth)其中“ scrollbarWidth”是一些固定值,例如15px
Danield

@Danield我实际上需要一个跨浏览器修复,其中每个本地浏览器滚动条的宽度都可变
Marten Zander 2015年

2
我目前正在使用在Chrome v64上使用引导程序4的页面,%是内部宽度(不包括滚动条),vw是外部宽度(包括滚动条的宽度)-因此,我不能使用vw,并且像OP一样,我不不明白为什么会这样。
Eric_B

Answers:


112

一种方法是使用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))
}  

40
这是惊人的,但是不幸的是,仅当您要调整大小的元素是的直接子body元素,或者元素的宽度与相同body(否则100%将引用错误的元素的宽度)时,此选项才有效。在这种情况下,您可以简单地使用百分比。除非我想念什么?
Nateowami

7
对于100vw占滚动条确实是一个问题的情况,也就是当您需要将100vw块放入具有固定宽度的容器中时,这种方法不是可以的。
肯定

52
数学:100vw - (100vw - 100%) = 100vw - 100vw + 100% = 100% 我想念什么吗?
卡米尔·基茨凯夫斯基(KamilKiełczewski)

3
不幸的是,这对于绝对定位的元素将不起作用,因为那里100%都不可用:(
Hrvoje Golcic

4
@TKoL在他的解决方案可以真正解决问题的每种情况下,width:50%也会同样有效。KamilKiełczewski是正确的,此解决方案无用。
Eliezer Berlin

14

我这样做是通过在文档加载后添加一行javascript来定义CSS变量:

document.documentElement.style.setProperty('--scrollbar-width', (window.innerWidth - document.documentElement.clientWidth) + "px");

然后在CSS中,您可以使用var(--scrollbar-width)/不使用宽度不同的滚动条,针对不同的浏览器进行所需的任何调整。你可以做,如果需要的水平滚动条类似的东西,代替innerWidthinnerHeightclientWidthclientHeight


对我来说,返回的大小是所需大小的两倍。有什么提示吗?给我16像素,但8像素就足够了
Fabian Beyerlein

9

根据规范,视口相对长度单位不考虑滚动条(实际上,假定它们不存在)。

因此,无论您的预期行为是什么,使用这些单元时都无法考虑滚动条。


同样,vw根据规范,尚不知道任何滚动条的存在。因此,您不能考虑它们。
马达拉的鬼魂2015年

1
根据规格,除非溢出自动发生,否则vw确实会占用滚动条的宽度,然后对vw值就像“隐藏”一样工作。因此,如果页面必须溢出,请将其设置为“ scroll”。使用overflow-x和overflow-y,您可以选择要显示的滚动条。
Kulvar

1
@Kulvar只是在chrome中尝试过,将body设置为overflow-y: scrollvsoverflow-y: auto似乎并没有改变vw单位的计算值。具体来说,我在网站上设置了3.82vw,计算机的宽度为1920px。使用自动溢出功能,3.82vw = 73.344px,然后我尝试使用溢出滚动,它也发出了73.344px,没有变化,如果您正确的话,它实际上应该发出72.6946px
TKoL18年

100%考虑了滚动条,因此,如果您的案例是100vw(如果可以),请将其更改为100%
Jairo

3

Webkit浏览器将滚动条排除在外,其他则将其包括在返回的宽度中。这当然可能会导致问题:例如,如果您使用ajax动态生成的内容会动态增加高度,那么Safari可能会在页面可视化期间从一种布局切换到另一种布局……好吧,这种情况并不经常发生,但是注意。在移动设备上,问题较少,通常不会显示导致滚动条的原因。

就是说,据我所知,如果您的问题是准确计算所有浏览器中没有滚动条的视口宽度,那么一种好方法是:

width = $('body').innerWidth();

先前已设定:

body {
    margin:0;
}

2

设置为时,本vw机不考虑overflow-y滚动条。overflow-yauto

将其更改为overflow-y: scroll;,该vw单位将成为没有滚动条的视口。

只有缺点要考虑。如果内容适合屏幕,则仍会显示滚动条。可能的解决方案是将javascript中的从更改autoscroll


1
你的意思是overflow-x
伊莱兰·马尔卡

这不是真的。大众汽车包括带有overflow-y: scroll;
NoSkill的

0

我发现它可以正常工作而又不会使代码与“ 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>


0

如果情况类似于滑块:如许多答案中所述,宽度100%不会考虑滚动条,而100vw会考虑。如果有许多元素需要占用窗口的宽度,并且已经嵌套在已经具有100%窗口宽度(或者其自然块宽度就是这样)的容器内,则可以使用:

  • 显示容器的弹性
  • Flex:0 0 100%用于子元素

-3

最简单的方法是将html&body设置为100vw:

html, body{ width:100vw; overflow-x: hidden; overflow-y: auto; margin: 0; }

唯一的问题是,如果显示滚动条,则最右边的部分将被剪切掉。


-3

在我的情况下,我有一个设置div 100wh-230px,我也面临着同样的问题,我的额外滚动宽度是:

width: calc(100vw - (100vw - 100%) - 230px);

-4

这不是我的解决方案,但可以帮助我创建下拉式全角菜单,相对元素中的绝对值在不全范围内。

我们应该在:root的css var中滚动,然后使用它。

:root{
 --scrollbar-width: calc(100vw - 100%);
}


div { margin-right: var(--scrollbar-width); }

https://codepen.io/superkoders/pen/NwWyee


2
这仅适用于div,因为它位于根目录。如果div不在根目录,则会中断。这是因为calc是在引用时解析的,相对于引用它的选择器而言,而不是在定义它的位置。codepen.io/Pedr/pen/YorLPM
不受干扰,
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.