Применить вертикальную полосу прокрутки к окну содержимого, а не к телу / окну просмотра - PullRequest
Новая
       13

Применить вертикальную полосу прокрутки к окну содержимого, а не к телу / окну просмотра

2 голосов
/ 21 марта 2019

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

Я использую CSS Flexbox.Вот очень упрощенная версия разметки и CSS: 

body, div, h1, h2, html, p {
  margin: 0;
  padding: 0;
}

body,
html {
  height: 100%;
}

.siteContainer {
  background: gold;
  display: flex;
  flex-direction: column;
  min-height: 100%;
}

.contentContainer {
  background: lightblue;
  display: flex;
  flex: 1;
  flex-direction: column;
}

.subcontentContainer {
  background: pink;
  flex: 1;
  overflow-y: scroll;
}
<div class="siteContainer">
  <h1>Header</h1>
  <div class="contentContainer">
    <h2>Subheader</h2>
    <div class="subcontentContainer">
      <p>Some text here.</p>
      <p>Some text here.</p>
      <p>Some text here.</p>
      <p>Some text here.</p>
      <p>Some text here.</p>
      <p>Some text here.</p>
      <p>Some text here.</p>
      <p>Some text here.</p>
      <p>Some text here.</p>
      <p>Some text here.</p>
      <p>Some text here.</p>
      <p>Some text here.</p>
      <p>Some text here.</p>
      <p>Some text here.</p>
      <p>Some text here.</p>
      <p>Some text here.</p>
      <p>Some text here.</p>
    </div>
  </div>
</div>

Предполагая, что ваш экран имеет некоторую высоту, вы должны увидеть, что розовая часть занимает большую часть экрана, и текст не должен идти вертикально за пределы экрана..

Однако, если вы скопировали и вставили часть <p>Some text here.</p> несколько раз, чтобы текст исчез с экрана, вы увидите, что полоса прокрутки в окне просмотра включена.

Вместо полосы прокрутки окна просмотра я хочу остановить содержимое в нижней части экрана (предположительно, с помощью overflow-y или что-то в этом роде) и добавить полосу прокрутки только к розовому сечению, а не иметь полосу прокрутки для области просмотра.

Возможно ли это только с помощью CSS, и если да, то как?Спасибо.

Ответы [ 2 ]

2 голосов
/ 21 марта 2019

Если вы установите overflow-y: hidden в тело, внешняя полоса прокрутки исчезнет.

Установите высоту от body и siteContainer до 100vh. 

html {
  box-sizing: border-box;
}

*,
*::before,
*::after {
  box-sizing: inherit;
}

body {
  margin: 0;
  padding: 0;
  height: 100vh;
  overflow-y: hidden;  
}

body,
div,
h1,
h2,
html,
p {
  margin: 0;
  padding: 0;
}

.siteContainer {
  background: gold;
  display: flex;
  flex-direction: column;
  min-height: 100%;
  height: 100vh;
}

.contentContainer {
  background: lightblue;
  display: flex;
  flex: 1;
  flex-direction: column;
}

.subcontentContainer {
  background: pink;
  flex: 1;
  overflow-y: auto;
}
<div class="siteContainer">
  <h1>Header</h1>
  <div class="contentContainer">
    <h2>Subheader</h2>
    <div class="subcontentContainer">
      <p>Some text here.</p>
      <p>Some text here.</p>
      <p>Some text here.</p>
      <p>Some text here.</p>
      <p>Some text here.</p>
      <p>Some text here.</p>
      <p>Some text here.</p>
      <p>Some text here.</p>
      <p>Some text here.</p>
      <p>Some text here.</p>
      <p>Some text here.</p>
      <p>Some text here.</p>
      <p>Some text here.</p>
      <p>Some text here.</p>
      <p>Some text here.</p>
      <p>Some text here.</p>
      <p>Some text here.</p>
    </div>
  </div>
</div>
1 голос
/ 22 марта 2019

Проблема сводится к следующему: flex: 1 в вашем коде.

flex: 1 - это сокращенное правило, которое переводится как:

  • flex-grow: 1
  • flex-shrink: 1
  • flex-basis: 0

Поскольку вы используете контейнеры в направлении столбцов, flex-basis представляет height. Итак, вы установили свои гибкие элементы на height: 0.

Но свойство overflow может работать только тогда, когда контейнер имеет заданную высоту.

От MDN :

Для того, чтобы overflow имел эффект, контейнер уровня блока должен иметь либо установленную высоту (height или max-height), либо white-space установлено на nowrap.

Ну, для некоторых браузеров flex-basis: 0 может быть недостаточно для удовлетворения этих условий, поэтому переполнение не произойдет.

Чтобы обеспечить надежную работу макета во всех браузерах, установите высоту (любую высоту) для элемента переполнения. Добавьте это к своему коду: 

.subcontentContainer {
   flex: 1 1 1px;
 }


.siteContainer {
  background: gold;
  display: flex;
  flex-direction: column;
  height: 100vh;
}

.contentContainer {
  background: lightblue;
  display: flex;
  flex: 1;
  flex-direction: column;
}

.subcontentContainer {
  background: pink;
  flex: 1 1 1px; /* ADJUSTMENT */
  overflow-y: auto;
}

body,
div,
h1,
h2,
html,
p {
  margin: 0;
  padding: 0;
}
<div class="siteContainer">
  <h1>Header</h1>
  <div class="contentContainer">
    <h2>Subheader</h2>
    <div class="subcontentContainer">
      <p>Some text here.</p>
      <p>Some text here.</p>
      <p>Some text here.</p>
      <p>Some text here.</p>
      <p>Some text here.</p>
      <p>Some text here.</p>
      <p>Some text here.</p>
      <p>Some text here.</p>
      <p>Some text here.</p>
      <p>Some text here.</p>
      <p>Some text here.</p>
      <p>Some text here.</p>
      <p>Some text here.</p>
      <p>Some text here.</p>
      <p>Some text here.</p>
      <p>Some text here.</p>
      <p>Some text here.</p>
    </div>
  </div>
</div>
...