logo标签列表

CSS：如何在固定高度的容器内获得带有滚动条的div？

cssscrollbaroverflow
132

我有以下标记：

<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 几乎没有起到任何作用，原因很奇怪。

6个回答
203

设置overflow应该可以解决问题，但您还需要设置Content的高度。如果未设置高度属性，则

会垂直增长到所需的高度，并且不需要滚动条。

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

10
如果你给Content设定了固定的高度，那么你不应该给FixedHeightContainer设定一个固定的高度，因为你无法知道你的标题有多高，所以Content可能会被挤出去。参见：http://jsfiddle.net/ftkbL/2/ 你应该仅仅在带有overflow:scroll属性的元素上设置固定高度。请参见http://jsfiddle.net/ftkbL/3/或http://jsfiddle.net/ftkbL/4/。 - RoToRa
有没有一种方法可以同时拥有短高度和隐藏滚动条？这样，当用户在移动设备上向下拖动时，他们会看到自己正在向下滚动，但不必在浏览器中看到两个滚动条的麻烦。 - klewis
@blackhawk - 据我所知没有这样的功能。您可能需要使用JavaScript来实现。具体而言，我想到了jQuery Draggable库：http://jqueryui.com/draggable/ -需要考虑的一件事是...桌面用户如何知道滚动？ - Dutchie432
这种情况下“height: auto;”无效。有什么建议吗？ - always-a-learner
高度必须硬编码为数字值。如果指定“height:auto”，容器应该根据内容增加高度，从而消除了首先需要滚动条的需求。 - Dutchie432
显示剩余3条评论
9

顺便提一下，这是我的方法——一个对我来说简单有效的方法：

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

这是一个非常好的问题，因为对于这样一个简单的任务，答案并不立即显而易见。多年来，我遇到过这个问题几次，似乎每次都需要仔细思考才能弄清楚。

以下是我的解决方案，只使用了两个CSS类'innerDiv'和'outerDiv'。

<div id="outerDiv">
  <div id="innerDiv">
     A <p> B <p> C <p> D <p>
  </div>
</div>

<style>
    #outerDiv
    { height : 200px;
      margin : 44px; border: solid 4px Red;
    }

    #innerDiv
    { height     : 80%;
      overflow-y : auto;
      border     : solid 4px Green; font-size: 300%;
    }
</style>

为什么这样做有效，并且为什么我说答案“不是立即显而易见的”？
在上面的例子中，outerDiv和innerDiv都具有固定的高度，因为我们为它们两个设置了height属性。
我们使innerDiv的高度小于outerDiv的高度。因此，innerDiv“适合”于outer-div，因此外部div应该不会出现滚动条，对吗？是的，除非innerDiv有太多内容，无法适应innerDiv的固定高度而溢出。因此，问题是如何防止内部div“溢出”？
防止内部Div溢出的方法是给它添加属性“overflow:auto”，或者如果我们只想防止垂直溢出，则为“overflow-y:auto”。
解决方案“不是立即显而易见的”原因是：'overflow'的默认值不是'auto'，而是'visible'。
人们可能（错误地）认为overflow的默认值是“auto”，因为那样每件事情都会自动处理，对吗？不要那么快，overflow的默认值是可见的，而不是'auto'。
因此，如果您从上面的示例中删除“overflow-y:auto”，则不会出现滚动条。如果您将其删除但将其添加到outerDiv中，则外部div将具有滚动条，这不是我们想要的。如果两者都有，则只有innerDiv会出现滚动条。
3

上面的答案来自Dutchie432提供的代码

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

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

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

1)将div.Content的高度和宽度设置为设计要求的大小（最好更小）。您可以使用px或pcnt作为unit。
2)现在添加overflow-y属性并将值设置为auto。

CSS：

<style>
        .FixedHeightContainer 
        {
            float:  right;
            height: 250px;
            width:  250px;
            border: 1px solid red; 
        }
        .Content
        {
            height: 65%;
            width:  95%;
            overflow-y: auto;
            border: 1px solid red; 
        }
    </style>

HTML：

<div class="FixedHeightContainer">
  <h2>Title</h2>
  <div class="Content">
    Any length/size of content.
  </div>
</div>
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接