html - 如何在我的侧面板上放置滚动条？-6ren

html - 如何在我的侧面板上放置滚动条？

转载作者：可可西里更新时间：2023-11-01 12:58:47

<分区>

我正在玩弄 css 网格布局并关注 this tutorial并且想知道如何添加一个滚动条，使内容在一定高度后垂直滚动。

到目前为止，我的所有尝试都使滚动条成为可能，但底部箭头被截断了。

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;

}