CSS：如何在固定高度的容器内获取 div 的滚动条答案

【问题标题】：CSS: how to get scrollbars for div inside container of fixed heightCSS：如何在固定高度的容器内获取 div 的滚动条
【发布时间】：2023-04-02 16:53:01
【问题描述】：

我有以下标记：

<div class="FixedHeightContainer">
  <h2>Title</h2>
  <div class="Content">
    ..blah blah blah...
  </div>
</div>

CSS 如下所示：

.FixedHeightContainer
{
  float:right;
  height: 250px;
  width:250px;  
}
.Content
{
  ???
}

由于其内容，div.Content 的高度通常大于div.FixedHeightContainer 提供的空间。目前，div.Content 愉快地从div.FixedHeightContainer 的底部延伸出来——这根本不是我想要的。

当div.Content 的高度太大而无法容纳时，我如何指定它获得滚动条（最好是垂直的，但我并不挑剔）？

overflow:auto 和 overflow:scroll 什么都不做，出于某种奇怪的原因。

【问题讨论】：

标签： css scrollbar overflow

【解决方案1】：

设置overflow 应该会处理好它，但您还需要设置Content 的高度。如果没有设置 height 属性，则 div 将垂直增长到需要的高度，并且不需要滚动条。

参见示例： http://jsfiddle.net/ftkbL/1/

【讨论】：

好的 - 谢谢。所以我需要为 div.Content 指定一个高度？我认为它会从不适合的容器中解决，并在此基础上应用滚动条。
如果你给Content一个固定的高度，你不应该给FixedHeightContainer一个固定的高度，因为你不知道你的title会有多高，所以Content可能会被推送出去。请参阅：jsfiddle.net/ftkbL/2 您应该only 为具有overflow: scroll 的元素设置固定高度。见jsfiddle.net/ftkbL/3 或jsfiddle.net/ftkbL/4
我明白你的意思（来自第一个链接），但标题文本是已知的，并且太短而不能超过一行，除非用户将文本膨胀到不切实际的大小。
有没有办法让高度短的同时隐藏滚动条？这样当用户在移动设备上向下拖动时，他们会看到他们正在向下滚动，而不会在浏览器上看到 2 个滚动条的麻烦？
@blackhawk - 我不知道。您可能需要为此使用 Javascript。具体来说，我正在考虑 jQuery Draggable 库：jqueryui.com/draggable - 要考虑的一件事是......桌面用户如何知道滚动？

【解决方案2】：

FWIW，这是我的方法 = 一个适合我的简单方法：

<div id="outerDivWrapper">
   <div id="outerDiv">
      <div id="scrollableContent">
blah blah blah
      </div>
   </div>
</div>

html, body {
   height: 100%;
   margin: 0em;
}

#outerDivWrapper, #outerDiv {
   height: 100%;
   margin: 0em;
}

#scrollableContent {
   height: 100%;
   margin: 0em;
   overflow-y: auto;
}

【讨论】：

【解决方案3】：

来自Dutchie432上述答案的代码

.FixedHeightContainer {
    float:right;
    height: 250px;
    width:250px; 
    padding:3px; 
    background:#f00;
}

.Content {
    height:224px;
    overflow:auto;
    background:#fff;
}

【讨论】：

【解决方案4】：

HTML

<div class="FixedHeightContainer">
  <h2>Title</h2>
  <div class="Content">
    ..blah blah blah...
  </div>
</div>

CSS

.FixedHeightContainer
{
  float:right;
  height: 250px;
  width:250px;  
  overflow-y: scroll;
}

/*SCROLLBAR MODIFICATIONS*/

.FixedHeightContainer::-webkit-scrollbar {
    width: 8px;
}

.FixedHeightContainer::-webkit-scrollbar-thumb {
    background: #909090;
    border-radius: 8px;
}
.FixedHeightContainer::-webkit-scrollbar-track {
    background: #FFFFFF;
}

【讨论】：