HTML/CSS создает тело шире, чем область просмотра

Я попытаюсь создать сайт с горизонтальной прокруткой. Но когда я устанавливаю элемент шире области просмотра - тело не становится шире.

Следующий код не работает

body {
    float: left
}

Как я могу сделать тело шире окна просмотра?

Я создаю скрипт для этого - https://jsfiddle.net/stas_webdev/9L1gLoww/

Обновление: теоретически у меня есть неизвестное количество блоков .grid-cell. Так что я не знаю, какой должна быть ширина корпуса в каждом конкретном случае. Он должен быть гибким.


html css viewport document-body
person stas-webdev    schedule 07.06.2016    source источник
comment
Вам нужно сделать ширину тела больше 100%. 100% займет ширину экрана/окна.   -  person Rohit    schedule 07.06.2016

Ответы (2)


arrow_upward
0
arrow_downward

Если у вас неизвестное количество ячеек, просто добавьте свойство переполнения в свой html, body. Смотри ниже:

html, body {
  position: relative;
  height: 100%;
  background: red;
  overflow: auto;
  }
person Rohit    schedule 07.06.2016

arrow_upward
0
arrow_downward

Чтобы сделать ваше тело шире, вы можете установить его атрибут ширины на что-то большее, чем ширина вашего окна просмотра. Например:

body { width: 150%; }

Это займет ширину вашего окна просмотра и сделает ширину тела на 50% больше.

person bbasti    schedule 07.06.2016
comment
Теоретически у меня есть неизвестное количество блоков .grid-cell. Так что я не знаю, какой должна быть ширина корпуса в каждом конкретном случае. Он должен быть гибким. Таким образом, это решение не будет работать :( - person stas-webdev; 07.06.2016