Как привязать к окну браузера горизонтальный скролл вложенного дива?

Question

[Артем Семенов]

Добрый день!
Есть сайт, с примерно след.макетом:

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

Подскажите, пожалуйста, куда копать, как такое реализовать?

Answer 1

[Alex]

Оберните таблицу в div и укажите ему размер, который у вас серым на картинке.
А страница вообще будет без скрола

Answer 2

[Alex]

Попробуйте указать контейнеру таблицы

.container {
overflow: hidden;
width:600px;
height:300px;
}

Comments

[Артем Семенов]

В таком случае скроллы вовсе пропадают

[Alex]

Артем Семенов: Sorry. Свойство overflow:auto

Answer 3

[Дастан]

Ограничте ширину и пользуйтесь JavaScript библиотекой slimscroll

Answer 4

[Артем Семенов]

Alex Alex сделал как вы предложили, только в div обернул не только таблицу но и контент перед таблицей.
Осталось только каким-то образом определять размеры экрана пользователя, чтобы динамически выставлять размер у него.
Спасибо

Comments

[Alex]

height:100vh