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

92

我有以下标记：

<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

— 大卫
source

154

设置overflow应该照顾好它，但是您还需要设置高度Content。如果未设置height属性，则div将垂直增长到所需高度，并且不需要滚动条。

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

— 荷兰人432
source

好的谢谢。所以我需要为div.Content指定高度吗？我以为它可以从容器中找出不合适的容器，并在此基础上应用滚动条。

— 大卫，

6

如果给Content定高度，则不应给FixedHeightContainer定高度，因为您不知道标题的高度，所以Content可能会被推高。请参阅：jsfiddle.net/ftkbL/2您应该仅使用设置元素的固定高度overflow: scroll。参见jsfiddle.net/ftkbL/3或jsfiddle.net/ftkbL/4

— RoToRa 2011年

我的意思是（从第一个链接开始），但是标题文本是已知的，而且太短了，无法断行，除非用户将文本夸大到不切实际的大小。

— 大卫

有没有办法使矮个子同时隐藏滚动条？这样，当用户在移动设备上向下拖动时，他们会看到他们正在向下滚动，但是却没有在浏览器上看到2个滚动条的麻烦？

— klewis 2014年

@blackhawk-我不知道。您可能需要为此使用Javascript。具体来说，我在考虑jQuery Draggable库：jqueryui.com/draggable-要考虑的一件事是...桌面用户如何知道滚动？

— Dutchie432

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;
}

— 约翰·洛夫
source

1

以上答案由Dutchie432提供的代码

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

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

— Charitha Goonewardena
source

-2

使用overflow财产

overflow: hidden; 

overflow: auto;

overflow: scroll;

— 比斯马
source