Question

我有一个如下所示的布局：

<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的对话框？

Answer 1

只需使用css规则：

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

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

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

Answer 2

使用CSS为#content div提供设置的高度和可选的宽度，并在该div上设置CSS属性overflow: auto。如果内容超出高度，您将获得一个滚动条。

在单个div上启用滚动？

2 个答案: