HTML / CSS добавляет горизонтальную полосу прокрутки в нижней части страницы

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

 overflow: 'hidden', overflowX: 'scroll',

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

PS: Я использую response-semantic-ui

0
задан 13 August 2018 в 15:15

1 ответ

Просто поместите div в свой div. Пока дочерний div имеет установленную ширину, он будет переполняться, и появится полоса прокрутки. Думаю, это то, что вы хотите. Если вам нужно установить высоту внешнего, используйте высоту: 100vh, чтобы установить внешний div как высоту окна просмотра.

Надеюсь, что это поможет.

<div style="overflow-x: scroll; overflow-y: scroll; height: 150px; ">
  <div style="width: 800px; background-color: blue;">

    <br/>Test test test Test test test Test test test Test test test Test test test Test test test Test test test Test test test Test test test Test test test Test test test Test test test Test test test Test test test Test test test Test test test Test test test 
    <br/>Test
    <br/>Test 
    <br/>Test
    <br/>Test
    <br/>Test
    <br/>Test
    <br/>Test
    <br/>Test
    <br/>Test
    <br/>Test
    <br/>Test
    <br/>Test
    <br/>Test
    <br/>Test
    <br/>Test
    <br/>Test
    <br/>Test
    <br/>Test
    <br/>Test
    <br/>Test
    <br/>Test
    <br/>Test
    <br/>Test
    <br/>Test
    <br/>Test
    <br/>Test
    <br/>Test
  </div>
</div>

0
ответ дан 15 August 2018 в 17:01
  • 1
    Примечание: 100vh не будет уменьшаться горизонтальной полосой прокрутки. Также OP не хотел вертикальную полосу прокрутки в div. – Mark Baijens 13 August 2018 в 15:48
  • 2
    Вы теряете фиксированный заголовок, если поместить все в div – Pete 13 August 2018 в 16:15

Другие вопросы по тегам:

Похожие вопросы: