在单个 div 上启用滚动？答案

【问题标题】：Enable scrolling on a single div?在单个 div 上启用滚动？
【发布时间】：2011-06-25 16:33:39
【问题描述】：

我的布局如下所示：

<html>
  <head>
    stuff here
  </head>
  <body>
    <div id="master">
      <div id="toolbar">
        <input type="text" id="foo">
      </div>
      <div id="content">
        a whole bunch of content in here
      </div>
    </div>
  </body>
</html>

'#master' 是一个 jquery UI 对话框的容器。我希望'#content' div 的内容可以滚动，但'#toolbar' 不能滚动。这对 jquery UI 的对话框是否可行？

【问题讨论】：

标签： javascript jquery css jquery-ui html

【解决方案1】：

只需使用 css 规则：

#content { overflow: auto; height: [desired height] }

如果模态框具有动态高度，您可能需要使用 jQuery。在那种情况下，在模态的open 上，您可以设置内部容器的高度。比如：

open: function(){
    var modalHeight = $('#master').height();
    $('#content').height(modalHeight - [footer and title]);
}

【讨论】：

"open:"是对话框打开时调用的函数吗？
完美！这是我的第一个 JS 项目，所以我还在学习。我感谢社区的耐心。 :)
嗯，这行得通，但如果我调整大小，对话框的底部会伸展，但 #content 高度不会。如果我将大小调整得更小，则会添加第二个滚动条。我想我知道为什么.. 嗯

【解决方案2】：

使用 CSS 为 #content div 设置高度和可选宽度，并在该 div 上设置 CSS 属性 overflow: auto。如果内容超过高度，你会得到一个滚动条。

【讨论】：

另外：不要在对话框的构造函数选项上设置高度。