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

Posted 2023-02-21

【中文标题】CSS：如何在固定高度的容器内获取 div 的滚动条

【英文标题】：CSS: how to get scrollbars for div inside container of fixed height

【发布时间】：2011-06-06 12:16:59

【问题描述】：

我有以下标记：

<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 什么都不做，出于某种奇怪的原因。

【参考方案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;