Вопрос:

Можно ли рассчитать ширину области просмотра (vw) без полосы прокрутки?

css viewport-units

24841 просмотра

7 ответа

590 Репутация автора

Как уже упоминалось в заголовке, можно ли рассчитать vwбез полос прокрутки только в css?

Например, мой экран имеет ширину 1920px. vwвозвращается 1920px, отлично. Но моя фактическая ширина тела только что-то вроде 1903px.

Есть ли способ для меня получить 1903pxзначение только с помощью css (не только для непосредственных потомков body), или мне абсолютно необходим JavaScript для этого?

Автор: Marten Zander Источник Размещён: 09.11.2015 10:00

Ответы (7)


4 плюса

121220 Репутация автора

Согласно спецификациям , единицы измерения относительной длины области просмотра не учитывают полосы прокрутки (и фактически предполагают, что они не существуют).

Таким образом, независимо от вашего предполагаемого поведения, вы не можете принимать во внимание полосы прокрутки при использовании этих модулей.

Автор: Madara Uchiha Размещён: 09.11.2015 10:06

1 плюс

1235 Репутация автора

Браузеры Webkit исключают полосы прокрутки, другие включают их в возвращаемую ширину. Это, конечно, может привести к проблемам: например, если у вас есть динамически сгенерированный контент с ajax, который динамически увеличивает высоту, Safari может переключаться с макета на другой во время визуализации страницы ... Хорошо, это случается не часто, но это что-то знать о. На мобильных устройствах проблем меньше, поскольку полосы прокрутки обычно не отображаются.

Тем не менее, если ваша задача - точно рассчитать ширину области просмотра без полос прокрутки во всех браузерах, насколько я знаю, хороший метод заключается в следующем:

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

предварительно установив:

body {
    margin:0;
}
Автор: holden Размещён: 09.11.2015 11:28

66 плюса

717 Репутация автора

Один из способов сделать это с помощью Calc. Насколько я знаю, 100% это ширина, включая полосы прокрутки. Так что если вы делаете:

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

Вы получите 100vw минус ширина полосы прокрутки.

Вы также можете сделать это с высотой, если вы хотите, чтобы квадрат составлял, например, 50% области просмотра (минус 50% ширины полосы прокрутки)

.box {
  width: calc(50vw - ((100vw - 100%)/2))
  height: 0
  padding-bottom: calc(50vw - ((100vw - 100%)/2))
}  
Автор: Mattias Ottosson Размещён: 19.01.2016 07:02

1 плюс

1104 Репутация автора

vwУстройство не принимает overflow-yскроллбар во внимание при overflow-yустановлено значение auto.

Измените это на, overflow-y: scroll;и vwустройство будет окном просмотра без полосы прокрутки.

Единственный недостаток, чтобы принять во внимание. Если содержимое помещается на экран, полоса прокрутки отображается в любом случае. Возможное решение для перехода от autoк scrollв JavaScript.

Автор: Ilario Engler Размещён: 07.02.2018 10:26

0 плюса

3406 Репутация автора

Единственный способ, с помощью которого я нашел, что он работает, не путая ваш код с «calc», - это сделать размер элемента контейнера равным 100vw; Добавление оболочки вокруг контейнера для overflow-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 Размещён: 21.03.2019 03:30

0 плюса

378 Репутация автора

Теперь это мое решение, но оно помогает мне создавать выпадающее полноэкранное меню с абсолютным относительным элементом в неполную область.

Мы должны получить прокрутку в css var in: root и затем использовать ее.

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


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

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

Автор: Denis Savenko Размещён: 22.05.2019 07:55

0 плюса

104 Репутация автора

Самый простой способ - установить html & body в 100vw:

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

Единственная проблема в том, что правая часть будет немного обрезана, если будет показана полоса прокрутки.

Автор: gonnavis Размещён: 13.06.2019 06:34
Вопросы из категории :
32x32