Сделайте две колонки отдельно прокручиваемыми и высоту оставшейся длины области просмотра - PullRequest
Новая
       25

Сделайте две колонки отдельно прокручиваемыми и высоту оставшейся длины области просмотра

0 голосов
/ 20 декабря 2018

У меня есть JS Fiddle, работающий именно с тем, что я хотел бы: http://jsfiddle.net/j7ay4qd8/5/

Он состоит из двух столбцов, которые можно прокручивать по отдельности, и различные разделы левого столбца можно легко прокрутить с помощью JavaScript.без влияния на правый столбец или на остальную часть страницы.

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

height:calc(100vh - 90px);

Конечно, это может не работать на разных браузерах, устройствах и разрешениях.

И оно сломается, если будут добавлены какие-либо элементы или изменится размер этих навигационных элементов.

Что я действительно хочу, так это чтобы #form автоматически изменял размер, чтобы заполнить все, что осталось от области просмотра.

В моем текущем примере, если бы я добавил другой элемент, такой как предупреждение, #content и #sidebarбудет длиннее, чем окно просмотра, и я получу перескочившую прокрутку, поскольку вся страница прокручивается после прокрутки #content div.

Пример с предупреждением и перескокомscroll: http://jsfiddle.net/c4k9u0mr/

Я нашел этот jsfiddle, который, кажется, объясняет, что я хочу использовать flexbox: http://jsfiddle.net/7yLFL/

Однако мои попытки сделать это с помощью flexbox тоже не сработали.Единственный способ получить отдельно прокручиваемую #content и #guidelines - это дать им фиксированную высоту и вернуться к исходной точке, как сделать эти div'ы 100% от контейнера div.

Вот моя неудачная попытка использования flexbox (в этом примере он имеет фиксированную высоту 100 пикселей): http://jsfiddle.net/jh6d5ztq/

Возможно ли получить первую и вторую работу JS Fiddle без определения фиксированной высоты с помощью px?

1 Ответ

0 голосов
/ 21 декабря 2018

  1. Все родительские элементы, которые занимают оставшуюся высоту области просмотра, должны иметь высоту 100%.В начальной загрузке используйте h-100.

  2. Ближайший родительский элемент этих элементов должен быть flex и должен иметь flex-direction: column.В начальной загрузке используйте d-flex и flex-column.Некоторые classes, такие как row, уже flex, поэтому не используйте d-flex.

  3. Используйте flex-grow-1 для элемента, который занимает оставшуюся высоту.Опять же, некоторые classes, такие как col, имеют flex-grow:1.

Bootstrap flex классы 

html,
body {
  height: 100%;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />
<div class="d-flex flex-column h-100">
  <div class="py-3 bg-danger">

  </div>
  <div class="py-3 bg-danger">

  </div>
  <div class="flex-grow-1 bg-primary">

  </div>
</div>

Сетка начальной загрузки 

html,
body {
  height: 100%;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<div class="fluid-container h-100">
  <div class="row flex-column h-100">
    <div class="col-auto py-3 bg-danger">

    </div>
    <div class="col-auto py-3 bg-success">

    </div>
    <div class="col bg-primary">

    </div>
  </div>
</div>

Теперь div.col / div.flex-grow-1 занимает оставшуюся высоту области просмотра.Однако, если высота их содержимого больше, чем у viewport, они этого не сделают: их высота равна высоте их содержимого.Если вы хотите сделать его прокручиваемым, используйте overflow: auto.Я думаю, у bootstrap-4 нет класса ни для одного из свойств overflow.Таким образом, вы должны использовать пользовательские CSS.

https://codepen.io/anon/pen/JwWpgQ

В качестве примечания: если вы хотите, чтобы нижний колонтитул находился внизу , используйте эти методы, но поменяйте местами colcol-auto

Если вы хотите, чтобы несколько элементов можно было прокручивать отдельно, используйте overflow-auto и h-100 для этих элементов.

html,
body {
  height: 100%;
}

.overflow-auto {
  overflow: auto;
}

.h-200vh {
  height: 200vh;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />
<div class="fluid-container h-100">
  <div class="row flex-column h-100">
    <div class="col-auto py-3 bg-danger">
    </div>
    <div class="col-auto py-3 bg-success">
    </div>
    <div class="col bg-dark d-flex">
      <div class="w-50 h-100 overflow-auto">
        <div class="bg-danger h-200vh"></div>
      </div>
      <div class="w-50 overflow-auto h-100">
        <div class="bg-primary h-200vh"></div>
      </div>
    </div>
  </div>
</div>

https://codepen.io/anon/pen/QzpQRO

Вывод:

Используйте загрузочную сетку, как обычно, но используйте flex-column on row и col для элемента, который занимает всю оставшуюся высоту области просмотра.Если вы хотите сделать его прокручиваемым, используйте специальный CSS, чтобы применить overflow:auto.

Комментарий, если у вас есть какие-либо вопросы, и я отвечу.Я решил твои проблемы, но я не буду публиковать их, потому что я думаю, что лучше всего сначала попробовать.

Обновление

Это мое решение.https://codepen.io/anon/pen/Jwrzwm

...