Горизонтальная полоса прокрутки появляется только внизу страницы

Question

Горизонтальная полоса прокрутки появляется только внизу страницы

У меня есть страница со следующей структурой HTML...

<html>
    ...
    <body>
        <div class="wrapper">
        ...
        </div>
    </body>
</html>

.wrapper устанавливается на min-width: 1100px по причинам, я не буду вдаваться в. Поэтому, когда размер браузера уменьшается до 1100 пикселей, я хочу, чтобы появилась горизонтальная полоса прокрутки.

Мой CSS выглядит следующим образом:

html {
    overflow-x: scroll;
    height: 100%;
}

body {
    overflow: auto;
}

.wrapper {
    min-width: 1100px;
    margin: 0 auto;
}

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

Вот схема моей проблемы: http://oi62.tinypic.com/r06m1z.jpg

И кодовая ручка: http://codepen.io/anon/pen/ocxvs

Заранее благодарю за любую помощь!

13

css scrollbar overflow horizontal-scrolling

Источник

user1984868 08 авг '14 в 09:40

1 ответ

Решение

Другие вопросы по тегам css scrollbar overflow horizontal-scrolling

user404335 08 авг '14 в 09:46 2014-08-08 09:46 · Accepted Answer · 2014-08-08 09:46

Это потому, что ваш документ (body) не растягивается на всю высоту окна просмотра (html), вам нужно назначить height:100vhтакже удалите настройки переполнения, чтобы не отображались 2 полосы прокрутки (одна на body один на html).

Просто измените свой CSS на:

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