Как разместить полосу прокрутки на боковой панели?

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

Все мои попытки до сих пор делают полосу прокрутки, но нижняя стрелка обрезается.

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

<div class="grid-container">
    <div class="grid-element header">Header</div>
    <div class="grid-element sidebar">
        <div> test </div>
        <div> test </div>
        <div> test </div>
        <div> test </div>
        <div> test </div>
        <div> test </div>
        <div> test </div>
        <div> test </div>
        <div> test </div>
        <div> test </div>
        <div> test </div>
        <div> test </div>
        <div> test </div>
        <div> test </div>
        <div> test </div>
        <div> test </div>
        <div> test </div>
        <div> test </div>
        <div> test </div>
        <div> test </div>
        <div> test </div>
        <div> test </div>
        <div> test </div>
        <div> test </div>
        <div> test </div>
        <div> test </div>
        <div> test </div>
        <div> test </div>
        <div> test </div>
        <div> test </div>
        <div> test </div>
        <div> test </div>
        <div> test </div>
        <div> test </div>
        <div> test </div>
        <div> test </div>
        <div> test </div>
        <div> test </div>
        <div> test </div>
        <div> test </div>
        <div> test </div>
        <div> test </div>
        <div> test </div>
        <div> test </div>
        <div> test </div>
        <div> test </div>
        <div> test </div>
        <div> test </div>
        <div> test </div>
        <div> test </div>
        <div> test </div>
        <div> test </div>
        <div> test </div>
        <div> test </div>
        <div> test </div>
        <div> test </div>
        <div> test </div>
        <div> test </div>
        <div> test </div>
        <div> test </div>
        <div> test </div>
        <div> test </div>
        <div> test </div>
        <div> test </div>
        <div> test </div>
        <div> test </div>
        <div> test </div>
        <div> test </div>
        <div> test </div>
        <div> test </div>
        <div> test </div>
        <div> test </div>
    </div>
    <div class="grid-element main">
        <div class="input-field">
            <input placeholder="Placeholder" type="text" class="validate">
        </div>
        <div class="input-field">
            <input placeholder="Placeholder" type="text" class="validate">
        </div>
        <div class="input-field">
            <input placeholder="Placeholder" type="text" class="validate">
        </div>
        <div class="input-field">
            <input placeholder="Placeholder" type="text" class="validate">
        </div>
        <div class="input-field">
            <input placeholder="Placeholder" type="text" class="validate">

        </div>
        <div class="input-field">
            <input placeholder="Placeholder" type="text" class="validate">

        </div>
        <div class="input-field">
            <input placeholder="Placeholder" type="text" class="validate">

        </div>
        <div class="input-field">
            <input placeholder="Placeholder" type="text" class="validate">

        </div>
        <div class="input-field">
            <input placeholder="Placeholder" type="text" class="validate">

        </div>
        <div class="input-field">
            <input placeholder="Placeholder" type="text" class="validate">

        </div>
        <div class="input-field">
            <input placeholder="Placeholder" type="text" class="validate">

        </div>
        <div class="input-field">
            <input placeholder="Placeholder" type="text" class="validate">

        </div>
        <div class="input-field">
            <input placeholder="Placeholder" type="text" class="validate">

        </div>
        <div class="input-field">
            <input placeholder="Placeholder" type="text" class="validate">

        </div>
    </div>


</div>

body {
  text-align: center;
  font-family: "Dosis";
}

.grid-container {
  display: grid;
  grid-template-columns: 0.25fr 10px 0.75fr;
  grid-template-rows: auto 20px auto 20px auto 20px auto;
  height: 100vh;
}

.grid-element {
  background-color: #444;
  color: #fff;
  padding: 20px;
  font-size: 2em;
}
.header {
  grid-column-start: 1;
  grid-column-end: 4;
  grid-row-start: 1;
  grid-row-end: 2;
  background: #69F;
}

.sidebar {
  grid-column-start: 1;
  grid-column-end: 2;
  grid-row-start: 3;
  grid-row-end: 6;
  background: #6F9;
  overflow-y: auto;
}

.main {
  grid-column-start: 3;
  grid-column-end: 4;
  grid-row-start: 3;
  grid-row-end: 4;
  background: #F69;

}

chobo2 13.06.2017 источник

comment

Описанная проблема далека от ясности. Какой браузер вы используете? Это хорошо выглядит в Chrome, в Linux. Я редко говорю это на SO, но не могли бы вы предоставить скриншот? - tao 13.06.2017

comment

Последняя версия Chrome - это то, над чем я пытаюсь заставить ее работать. - chobo2 13.06.2017

comment

Я просматривал его с боковыми панелями в codepen, и высоты окна было достаточно, чтобы вместить полную высоту. У меня проблема сейчас. - tao 13.06.2017

comment

Просто добавьте min-height: 0 к .grid-element: codepen.io/anon/pen/WOGQvv - Michael Benjamin 14.06.2017

comment

Начальная настройка элементов сетки — min-height: auto. Это означает, что элементы будут как минимум высотой своего содержимого. Это то, что вы видите в своем макете. Чтобы элементы сетки уменьшались ниже размера их содержимого, вам необходимо переопределить значение по умолчанию. Это можно сделать с помощью min-height: 0. Смотрите обман для более подробной информации. - Michael Benjamin 14.06.2017

Ответы (1)

arrow_upward
3
arrow_downward

Вы не добавили overflow-y: auto; к .main, из-за чего <body> увеличился в размере, чтобы обеспечить доступ к этому "видимому" содержимому. По какой-то причине это заставляет .grid-container расти в доступном пространстве, а .sidebar расширяется до полной высоты содержимого родителя.

Дополнительно я добавил:

body {
  margin: 0;       /* to remove its vertical scrollbar */
}
.main {
  grid-row-end: 6; /* assuming you want it same height as sidebar? */
}

Вот ручка: https://codepen.io/anon/pen/LLZvLE

Уточнение: не устанавливая переполнение .mains на auto, оно устанавливается на значение по умолчанию visible. Это помещает его переполняющее содержимое за пределы прокручиваемой области страницы со стороны bottom. В отличие от содержимого, перекрывающего стороны top или left, что не приводит к увеличению прокручиваемой области, видимое содержимое, выходящее за пределы сторон bottom или right, увеличивает область прокрутки (отсюда <body>), чтобы вы могли получить доступ к этому «видимому» содержимому.

Это заставляет <body> расти в высоту. Я не совсем понимаю, почему .grid-container позволяет себе расти в созданное пространство, потому что вы четко указали его высоту как 100vh, а не 100%. Может быть ошибка/особенность сетки. Я все еще изучаю сетку.

Однако установка .mains overflow на auto делает переполняющий контент доступным, а <body> больше не увеличивается в высоту, что устраняет вашу проблему.

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

body {
  text-align: center;
  font-family: "Dosis";
  margin: 0;
}

.grid-container {
  display: grid;
  grid-template-columns: 1fr 3fr;
  grid-template-rows: 0fr 1fr;
  height: 100vh;
  padding: 10px 10px 0;
  box-sizing: border-box;
}

.grid-element {
  background-color: #444;
  color: #fff;
  padding: 20px;
  font-size: 2em;
  margin-bottom: 10px;
}
.header {
  grid-column-start: 1;
  grid-column-end: 3;
  grid-row-start: 1;
  grid-row-end: 2;
  background: #69F;
}

.sidebar {
  grid-column-start: 1;
  grid-column-end: 2;
  grid-row-start: 2;
  background: #6F9;
  overflow-y: auto;
}

.main {
  grid-column-start: 2;
  grid-row-start: 2;
  background: #F69;
  overflow-y: auto;
  margin-left: 10px;
}

<div class="grid-container">
    <div class="grid-element header">Header</div>
    <div class="grid-element sidebar">
        <div> test </div>
        <div> test </div>
        <div> test </div>
        <div> test </div>
        <div> test </div>
        <div> test </div>
        <div> test </div>
        <div> test </div>
        <div> test </div>
        <div> test </div>
        <div> test </div>
        <div> test </div>
        <div> test </div>
        <div> test </div>
        <div> test </div>
        <div> test </div>
        <div> test </div>
        <div> test </div>
        <div> test </div>
        <div> test </div>
        <div> test </div>
        <div> test </div>
        <div> test </div>
        <div> test </div>
        <div> test </div>
        <div> test </div>
        <div> test </div>
        <div> test </div>
        <div> test </div>
        <div> test </div>
        <div> test </div>
        <div> test </div>
        <div> test </div>
        <div> test </div>
        <div> test </div>
        <div> test </div>
        <div> test </div>
        <div> test </div>
        <div> test </div>
        <div> test </div>
        <div> test </div>
        <div> test </div>
        <div> test </div>
        <div> test </div>
        <div> test </div>
        <div> test </div>
        <div> test </div>
        <div> test </div>
        <div> test </div>
        <div> test </div>
        <div> test </div>
        <div> test </div>
        <div> test </div>
        <div> test </div>
        <div> test </div>
        <div> test </div>
        <div> test </div>
        <div> test </div>
        <div> test </div>
        <div> test </div>
        <div> test </div>
        <div> test </div>
        <div> test </div>
        <div> test </div>
        <div> test </div>
        <div> test </div>
        <div> test </div>
        <div> test </div>
        <div> test </div>
        <div> test </div>
        <div> test </div>
        <div> test </div>
    </div>
    <div class="grid-element main">
        <div class="input-field">
            <input placeholder="Placeholder" type="text" class="validate">
        </div>
        <div class="input-field">
            <input placeholder="Placeholder" type="text" class="validate">
        </div>
        <div class="input-field">
            <input placeholder="Placeholder" type="text" class="validate">
        </div>
        <div class="input-field">
            <input placeholder="Placeholder" type="text" class="validate">
        </div>
        <div class="input-field">
            <input placeholder="Placeholder" type="text" class="validate">

        </div>
        <div class="input-field">
            <input placeholder="Placeholder" type="text" class="validate">

        </div>
        <div class="input-field">
            <input placeholder="Placeholder" type="text" class="validate">

        </div>
        <div class="input-field">
            <input placeholder="Placeholder" type="text" class="validate">

        </div>
        <div class="input-field">
            <input placeholder="Placeholder" type="text" class="validate">

        </div>
        <div class="input-field">
            <input placeholder="Placeholder" type="text" class="validate">

        </div>
        <div class="input-field">
            <input placeholder="Placeholder" type="text" class="validate">

        </div>
        <div class="input-field">
            <input placeholder="Placeholder" type="text" class="validate">

        </div>
        <div class="input-field">
            <input placeholder="Placeholder" type="text" class="validate">

        </div>
        <div class="input-field">
            <input placeholder="Placeholder" type="text" class="validate">

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

tao 13.06.2017

comment

Ах, я думал, что если бы у меня был один набор, то другой разобрался бы. Все еще не ясно, что вы имеете в виду, делает переполнение .grid-container, а .sidebar расширяется до полной высоты содержимого родителя. Также вам нужно указать конец строки сетки? - chobo2; 13.06.2017

comment

Спасибо, понятнее. Как насчет grd-row-end, все еще немного запутанного, если это необходимо, если вы просто хотите, чтобы он перешел к последней возможной строке. - chobo2; 13.06.2017

comment

Также с grid-template-rows, если вы просто хотите, чтобы все строки были автоматическими, можете ли вы сделать auto или вам нужно повторить (6, auto)? - chobo2; 13.06.2017

comment

Для последнего элемента вам не нужно указывать grid-row-end и grid-column-end, если вы просто хотите, чтобы он занимал оставшееся пространство сетки. Кроме того, если у вас нет каких-то действительно причудливых вещей, вам не нужно указывать дорожки для желобов. Просто используйте поля. Я максимально упростил вашу сетку. Проверьте это. (та же ссылка). - tao; 13.06.2017

comment

Чтобы заголовок сохранял тот же размер, когда в .main или .sidebar нет содержимого, я использовал grid-template-rows: 0fr 1fr;. Теперь его подталкивает высота контента, но если этого нет, он начинает расти. - tao; 13.06.2017

comment

Да, я удалил эти желоба, так как для моего дизайна они мне не нужны (у меня есть только заголовок, боковая навигация, основной контент). У меня есть один вопрос, хотя я пробовал сафари 10.3.2 и заметил, что полоса прокрутки не работает на сафари. Ты знаешь почему? - chobo2; 14.06.2017

comment

Проверьте на caniuse, поддерживается ли он или это известная проблема. Я сейчас не за столом. - tao; 14.06.2017

comment

Я не могу найти overflow-y на caniuse, но, согласно ему, переполнение поддерживается уже давно. - chobo2; 14.06.2017

comment

Я бы сначала проверил caniuse.com/css-grid/embed. - tao; 14.06.2017

comment

Ах, сетка кроется на том, что я проверял, прежде чем смотреть на сетку. 10.3.2 — первая версия ios Safari с полной поддержкой, и это единственная версия, которую мне нужно поддерживать. Кажется, мне нужно установить высоту (на боковой панели навигации / основной), чтобы прокрутка действительно работала. Не уверен, что установить высоту тоже, и это кажется прерывистым, когда я прокручиваю. - chobo2; 14.06.2017

Как разместить полосу прокрутки на боковой панели?

Ответы (1)

Вопросы по теме