没有滚动条，是否可以计算视口宽度（vw）？

82

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

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

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

css viewport-units

— 马丁·赞德（Marten Zander）
source

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

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))
}

— 马蒂亚斯·奥托森（Mattias Ottosson）
source

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)/不使用宽度不同的滚动条，针对不同的浏览器进行所需的任何调整。你可以做，如果需要的水平滚动条类似的东西，代替innerWidth用innerHeight和clientWidth用clientHeight。

— 用户11990065
source

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

— Fabian Beyerlein

9

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

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

— 马达拉的幽灵
source

同样，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;
}

— Holden
source

2

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

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

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

— 伊拉里奥·恩格勒
source

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>

展开摘要

— SequenceDigitale.com
source

0

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

显示容器的弹性
Flex：0 0 100％用于子元素

— 法肯多·维德拉·佩尼亚
source

-3

最简单的方法是将html＆body设置为100vw：

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

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

— 戈纳维斯
source

-3

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

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

— 奥马尔（Omar Errabaany）
source

-4

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

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

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


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

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

— 丹尼斯·萨文科（Denis Savenko）
source

2

这仅适用于div，因为它位于根目录。如果div不在根目录，则会中断。这是因为calc是在引用时解析的，相对于引用它的选择器而言，而不是在定义它的位置。codepen.io/Pedr/pen/YorLPM

— 不受干扰，