Пустое пространство внизу страницы за пределами html-тегов на мобильном телефоне после того, как ширина равна 100%

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

Проблема

Проблема, с которой я сталкиваюсь, напоминает "пустое место", которое находится внизу моей страницы. Это видно только на мобильных устройствах, и я не смог воспроизвести проблему на рабочем столе, но, зайдя в modor разработчика на chrome и посетив свой веб-сайт, я вижу проблему.

При использовании режима разработчика в chrome и проверке всех элементов становится очевидным, что "пустое пространство" - ничто. Он не содержит информации и не привязан к какому-либо элементу.

Однако после некоторого копания было обнаружено, что "пустое пространство" всплывает только после того, как задано значение ширины элемента. И не только ширина, но и ширина, которая превышает порт представления.

Что-то еще, что привлекло мое внимание, это то, что высота этого "пустого пространства" такая же, как высота порта просмотра.

Что я пытаюсь выполнить

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

Моя цель состоит в том, чтобы выполнить это исключительно с помощью css3 и html, без jQuery, без JavaScript и предпочтительно не с готовыми плагинами.

Пока "горизонтальная прокрутка" дает мне желаемый эффект, кроме огромного количества белого пространства, которое он дает в нижней части моей страницы. Я хотел бы потратить свое время на попытку "исправить", а не заменить его.

Воссоздание проблемы

Самый простой способ воссоздать мою проблему - начать с чистого html файла и предоставить ему следующие элементы:

<div id="wrapper"> ... </div>

И внутри обложки put:

<div class="content"></div>
<div class="content"></div>

Затем в вашем файле css добавьте следующие стили:

body {
    margin: 0; padding: 0;
}

#wrapper {
    width: 200vw;
    height: 100vh;
}

.content {
    float: left;
    width: 100vw;
    height: 100vh;
}

И не забудьте включить метатег в <head></head> для порта вида:

<meta name="viewport" content="width=device-width, initial-scale=1">

Для живого примера, пожалуйста, проверьте мой JSFiddle.

Изменить:

Добавление некоторых скриншотов моего инструмента разработчика Chrome для визуализации проблемы.

См. здесь фактическое содержимое веб-сайта, так как вы можете видеть, что все похоже на намеренное. Ширина 200vw, а высота - 100vw.

См. здесь проблему, записанную как "пустое пространство" , как описано в OP. Обратите внимание, что пустое пространство растягивается в два раза больше высоты height: 100vh, как установлено в стиле css. Ширина растягивается относительно содержимого, width: 200vw.

Размер экрана проявителя Chrome в модуле устройства (CTRL - SHIFT - M) равен 360x640 (ширина x высота).

Ответ 1

Проблема заключается в том, что есть ширинa > 100vw, поэтому появляется горизонтальная полоса прокрутки и высота от высоты страницы, поэтому появляется новая вертикальная полоса прокрутки и влияет на высоту страницы

Вот проблема
Таким образом, решение состоит в том, чтобы дать телу ширину 100%, а затем переполнить-x: hidden а затем он станет

Edit и здесь появился новый скриншот с включенными инструментами dev.

    body{
      margin: 0;
      padding: 0;
      display: block;
      width: 100%;
      overflow-x: hidden;
    }
   #wrapper {
    width: 200vw;
    height: 100vh;
}

.content {
    float: left;
    width: 100vw;
    height: 100vh;
    background-color:#eee;
}

<div id="wrapper">
    <div class="content"></div>
    <div class="content"></div>
</div>

Ответ 2

Вы пробовали:

body {
margin: 0;
padding: 0;
height:100vh;
overflow-y:none;
}

Ответ 3

Ваш код отлично работает, когда я его пробовал: http://codepen.io/staypuftman/pen/qZZxRG. Переключите элементы background, и вы увидите, что он работает так, как вы хотите.

Единственное отличие заключается в том, что я использовал normalize.css за кодом. Возможно, это получит код гремлин, который вы, возможно, пропустили. Нормализация - отличный способ избавиться от некоторых странностей HTML, и это очень легкий вес.