100vw, що спричиняє горизонтальне переповнення, але тільки якщо більше одного?

97

Скажімо, у вас є таке:

html, body {margin: 0; padding: 0}
.box {width: 100vw; height: 100vh}

<div class="box">Screen 1</div>

Ви отримаєте щось, що заповнює екран, без смуг прокрутки. Але додайте ще:

<div class="box">Screen 1</div>
<div class="box">Screen 2</div>

Ви отримуєте не лише вертикальні смуги прокрутки (очікувано), але невелику горизонтальну прокрутку.

Я розумію, що ви можете опустити ширину або встановити її на ширину: 100%, але мені цікаво, чому це відбувається. Хіба 100vw не повинен бути "100% ширини області перегляду"?

css

— rdoyle720
джерело

уникайте переповнення, прихованого на html та body, це не є гарним рішенням, якщо ви хочете використовувати позицію липкою на будь-якому з її дочірніх елементів ... max-width здається хорошим способом !!!

— NeueDeutsche

149

Як вже пояснювалося в wf4, горизонтальна прокрутка присутня завдяки вертикальній прокрутці. які ви можете вирішити, даючи max-width: 100%.

.box {
    width: 100vw;
    height: 100vh;
    max-width:100%;  /* added */
}

Робоча скрипка

— Mr_Green
джерело

3

Дякую, це добре працює, щоб вирішити проблему, але я все ще думаю, що це трохи неінтуїтивна поведінка за замовчуванням.

— дзвонить

2

Про неінтуїтивність: згідно caniuse.com це помилка браузера. caniuse.com/#feat=viewport-units -> Відома проблема 8: Наразі всі браузери, крім Firefox, неправильно вважають 100vw цілою шириною сторінки, включаючи вертикальну смугу прокрутки, що може призвести до горизонтальної смуги прокрутки при переповненні: встановлено auto .

— Jacob van Lingen

47

Якщо max-width: 100%ширина області перегляду без смуг прокрутки, то вам спочатку не знадобилося 100vw:-) Ви могли б просто використовувати, width: 100%оскільки елемент не має жодного позиціонованого предка, тому його посиланням є тіло.

— Капсула

8

Це нічого не вирішує! max-width працює лише тому, що елемент є прямим натяком тіла! У будь-якому реальному випадку, коли ви б використовували 100 Вт замість 100% (наприклад, елемент всередині контейнера), це не буде працювати.

— Berlin,

2

Я не можу використовувати ширину на 100%, оскільки мій div знаходиться в контейнері, який я не знаю про ширину або відступ. Це вся причина використовувати 100vw замість 100%, тому ця відповідь безглузда. І це трапляється на Mac, також якщо ваше налаштування завжди показувати смуги прокрутки, хоча панелі прокрутки немає.

— Кертіс

37

смуги прокрутки будуть включені в vwтак, щоб бути додані горизонтальні прокрутки, щоб ви могли бачити під вертикальним прокруткою.

Коли у вас лише 1 коробка, вона має 100% ширину x 100% висоту. Як тільки ви додасте 2, його ширина 100% х 200% у висоту, що викликає вертикальну смугу прокрутки. Коли спрацьовує вертикальна смуга прокрутки, вона запускає горизонтальну смугу прокрутки.

Ви можете додати overflow-x:hiddenдоbody

html, body {margin: 0; padding: 0; overflow-x:hidden;}
.box {width: 100vw; height: 100vh; background-color:#ff0000}
.box2 {width: 100vw; height: 100vh; background-color:#ffff00}

http://jsfiddle.net/NBzVV/

— wf4
джерело

1

Завдяки цьому вміст з’являється під смугою прокрутки. jsfiddle.net/NBzVV/1 Щоб це було підходящим обхідним шляхом, вам потрібно додати правильне заповнення.

— James Donnelly

1

Так, добре помічений. Додавання max-width:100%до .boxзапобіжить цьому.

— wf4,

4

"отже, буде додано горизонтальний сувій, щоб ви могли бачити під вертикальним сувоєм" <- це речення допомогло моєму мозку зрозуміти, що насправді відбувається. +1

— Іван Дурст,

Тільки примітка про те, що overflowнавіть якщо ви додасте його до xжодної postition: stickyречі, це не спрацює.

— Т.Чмелевський

9

У мене була подібна проблема, і я запропонував таке рішення, використовуючи змінні JS та CSS.

JS:

function setVw() {
  let vw = document.documentElement.clientWidth / 100;
  document.documentElement.style.setProperty('--vw', `${vw}px`);
}

setVw();
window.addEventListener('resize', setVw);

CSS:

width: calc((var(--vw, 1vw) * 100);

1vw - це резервне значення.

— Степан Шатковський
джерело

1

Люблю це. досить елегантно

— andrevenancio

Це ідеально, оскільки тоді воно доступне у всьому світі. Дякую.

— fvaldez421

2

Оновлення: станом на Chrome версії 66, я більше не можу відтворити поведінку, повідомлену запитанням. Здається, ніяких обхідних шляхів не потрібно.

Оригінальна відповідь

Це насправді помилка, про яку повідомляється у цій відповіді та коментарях вище.

Хоча обхідний спосіб прийнятої відповіді (додавання .box {max-width: 100%;}), як правило, працює, я вважаю примітним те, що він наразі не працює display:table(перевірено в Chrome). У такому випадку єдиним обхідним шляхом, який я знайшов, є використання width:100%замість нього.

Розбита скрипка зdisplay:table
Робоча скрипка з display:tableтаwidth:100%

— Кукурудзяний
джерело

Ум, чи прийнята відповідь змінилася? Ви пропонуєте те саме, що і прийняту відповідь. Ось чому відповіді мають бути повними самі собою.

— Кіссакі

Прийнята відповідь пропонує додавання max-width: 100%. Я запропонував змінити width: 100vwна width: 100%. Я оновив свою відповідь, щоб вона була замкнутою.

— Cornflex

Існують інші браузери, крім Chrome, і деякі мають справу з смугою прокрутки інакше.

— LocalPCGuy

1

щоб позбутися ширини смуги прокрутки, включеної у vw, мені довелося зробити це:

html, body {
    overflow-x: hidden;
    height: 100vh;
}

— мануель-84
джерело

1

*,
html,
body {
  margin: 0;
  padding: 0;
  overflow: hidden;/*add This*/ 
}
/*and enjoy ^_^ */

— користувач13149444
джерело

6

Приховування проблеми не вирішує її. Хоча ваш підхід дійсно усуває переповнення, він просто приховує його. Це може спричинити проблеми, коли вміст повинен відображатися зовні (з якоїсь причини)

— Даніель Штайнер,

3

Привіт користувач13149444! Відповіді лише за кодом можуть вирішити проблему, але вони набагато корисніші, якщо пояснити, як вони її вирішують. Спільнота вимагає теорії, а також коду, щоб повністю зрозуміти вашу відповідь.

— RBT