如何在我的侧面板上放置滚动条？ [复制]答案

【问题标题】：How to put a scrollbar on my side panel? [duplicate]如何在我的侧面板上放置滚动条？ [复制]
【发布时间】：2017-11-15 14:28:06
【问题描述】：

我正在玩 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;

}

【问题讨论】：

所描述的问题还很不清楚。你使用的是什么浏览器？在 Linux 上的 Chrome 中看起来不错。我很少在 SO 上这么说，但你能提供截图吗？
Chrome 的最新版本，是我想要让它工作的。
我在 codepen 中使用侧面板视图查看它，并且窗口的高度足以容纳整个高度。我现在遇到了问题。
只需将min-height: 0 添加到.grid-element：codepen.io/anon/pen/WOGQvv
网格项目的初始设置是min-height: auto。这意味着项目将至少是其内容的高度。这就是您在布局中看到的内容。为了使网格项目缩小到其内容大小以下，您需要覆盖默认值。这可以通过min-height: 0 完成。有关更多详细信息，请参阅骗子。

标签： html css grid-layout css-grid

【解决方案1】：

您没有将 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> 不再增加高度，从而解决了您的问题。

根据 cmets，这是简化的网格，删除了不必要的轨道和属性。如果你把它和你所拥有的东西放在一起，我认为这是有道理的。当然，如果您需要布局划分，您应该进一步划分它，但是，对于您所拥有的，这似乎足够了：

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>

【讨论】：

啊，我想如果我有一套，另一套会解决的。仍然不清楚您的意思是“使 .grid-container 溢出并且 .sidebar 延伸到父级的完整内容高度”。您还必须指定网格行端吗？
谢谢，更有意义。使用 grd-row-end 怎么样，如果你只是想让它尽可能地转到最后一行，是否需要它仍然有点困惑。
还有grid-template-rows，如果你只是想让所有的行都是自动的，你可以做“auto”还是必须做repeat(6, auto)？
对于最后一个元素，如果您只想占用网格的剩余空间，则无需指定grid-row-end 和grid-column-end。此外，除非您有一些非常花哨的东西，否则您不需要为排水沟指定轨道。只需使用边距。我尽我所能简化了你的网格。看看这个。（相同的链接）。
当.main 或.sidebar 中没有内容时，为了保持标题大小不变，我使用了grid-template-rows: 0fr 1fr;。现在它是由 content-height 推动的，但如果它消失了，它就会开始增长。