在jQuery对话框中显示布局

Question

我正在尝试设置jQuery对话框的内容以填充其宽度和高度。 我已经设法使用HTML表格。 问题是我只想在某些区域应用滚动条。

这就是我现在所拥有的。

$('#_dialog').dialog({
  autoOpen: true,
  height: 275,
  width: 450,
  modal: true,
  resizable: true,
  closeOnEscape: false,
  open: function () {
    $(this)
    .css({
      'margin': '0',
      'padding': '0'
    })

    .parent()
    .css({
      'margin': '0',
      'padding': '0'
    })

    .find('.ui-dialog-buttonpane')
    .css({
      'margin-top': '0'
    });
  },
  buttons: [{text: 'Close', click: function () { $(this).dialog('close'); } }]
});

.div_container{height:100%; min-height:100%;}
.tbl_container{border-collapse:collapse; border-spacing:0; height:100%; min-height:100%; min-width:100%;}
.td_left_container{background-color:#e2eff7; border-right:1px solid #8f9ea5; vertical-align:top; width:25%;}
.div_left_container{ min-height:100%; min-width:175px;}
.td_top_container{background-color:#d8d8d8; border-bottom:1px solid #8c8c8c; height:50px;}
.td_middle_container{vertical-align:top;}
.div_middle_header_container{background-color:#f5f5f5; height:20px;}
.td_bottom_container{background-color:#ecf0f1;border-top:1px solid #d4d4d4; height:20px;}

<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>

<div id="_dialog" title="Dialog">
  <div class="div_container">
    <table class="tbl_container">
      <tbody>
        <tr>
          <td class="td_left_container" rowspan="3">
            <div class="div_left_container">
              <p>s</p>
              <p>c</p>
              <p>r</p>
              <p>o</p>
              <p>l</p>
              <p>l</p>
            </div>
          </td>
          <td class="td_top_container">
            <p>fixed height; no scroll (always visible);</p>
          </td>
        </tr>
        <tr>																														
          <td class="td_middle_container">
            <div class="div_middle_container">
              <div class="div_middle_header_container">fixed height; no scroll (always visible);</div>
              <div class="div_middle_content_container">remaining height; can have scroll if content is higher</div>
              </td>
        </tr>
        <tr>
          <td class="td_bottom_container">
            <p>fixed height; no scroll (always visible);</p>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</div>

如示例所示（通过运行代码段）我只想将滚动应用于两个不同的区域。

我正在寻找适用于主流浏览器的解决方案/建议。

提前致谢。

Answer 1

我找到了解决问题的方法。 这是代码（它可能对将来的某个人有用）。

$('#_dialog').dialog({
  autoOpen: true,
  height: 350,
  width: 500,
  modal: true,
  resizable: true,
  closeOnEscape: false,
  open: function () {
    $(this)
    .css({
      'margin': '0',
      'padding': '0'
    })

    .parent()
    .css({
      'margin': '0',
      'padding': '0'
    })

    .find('.ui-dialog-buttonpane')
    .css({
      'margin-top': '0'
    });
  },
  buttons: [{text: 'Close', click: function () { $(this).dialog('close'); } }]
});

.container{
  width: 100%; 
  height: 100%; 
  background-color: #f9f9f9; 
  position: relative;
  overflow: hidden;
}
.container div{
  text-align: center;
}
.nav{
  width: 25%; 
  background-color: aquamarine; 
  height: 100%; 
  position: absolute;
  left:0;
  top:0;
  overflow:auto;                
}
.top{
  width: 75%; 
  background-color: chartreuse; 
  height:50px;
  position:absolute;
  top:0;
  left:25%;
}
.content_header{
  width: 75%; 
  background-color: bisque ; 
  height:20px;
  position:absolute;
  top:50px;
  left:25%;
}
.content{
  width: 75%; 
  background-color: cadetblue ; 
  position:absolute;
  top:70px;
  bottom:20px;
  left:25%;
  overflow: auto;
}
.bottom{
  width: 75%; 
  background-color: darkolivegreen; 
  height:20px;
  position:absolute;
  bottom:0;
  left:25%;
}
.content_header p, .bottom p{
  line-height: 10px;
  font-size: 10px;
}

<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>

<div id="_dialog">
  <div class="container">
    <div class="nav">
      <p>s</p>
      <p>c</p>
      <p>r</p>
      <p>o</p>
      <p>l</p>
      <p>l</p>
    </div>
    <div class="top">
      <p>no scroll; fixed height; always visible</p>
    </div>
    <div class="content_header">
      <p>no scroll; fixed height; always visible</p>
    </div>
    <div class="content">
      <p>s</p>
      <p>c</p>
      <p>r</p>
      <p>o</p>
      <p>l</p>
      <p>l</p>
      <p></p>
      <p>s</p>
      <p>c</p>
      <p>r</p>
      <p>o</p>
      <p>l</p>
      <p>l</p>
    </div>
    <div class="bottom">
      <p>no scroll; fixed height; always visible</p>
    </div>

  </div>
</div>