html - 使表对话框内容可滚动

Question

我有一个这样设置的对话框:

<div style="position:fixed; display:block; width:600px; top:0; left:50%;margin-left:-275px;">
  <table style="width:100%;" cellpadding="0" cellspacing="0">
    <tbody>
      <tr>
        <td>
          <div class="modal-header">
            <span class="close">×</span>
            <h2>Modal Header</h2>
          </div>
        </td>
      </tr>
      <tr>
        <td style="background-color:gray;">
          <table>
            <tbody>
              <tr>
                <td>
                  <div class="modal-body">
                    <p>variable length really long stuff</p>
                </td>
              </tr>
            </tbody>
          </table>
        </td>
      </tr>
      <tr>
        <td>
          <div class="modal-footer">
            <h3>Modal Footer</h3>
          </div>
        </td>
      </tr>
    </tbody>
  </table>
</div>

现在，对话框的内容对于页面来说太长了，而且由于位置是固定的，用户永远无法向下滚动到对话框的底部。我希望内表仅在内容长度超过视口(viewport)区域时才可滚动 - 但我始终希望页眉和页脚可见。

Here is a code sample.我怎样才能做到这一点？

Answer 1

如果您可以使用 vh 单位，您可以强制 modal-body 滚动:

.modal-body {
   padding: 2px 16px;
   overflow:auto;
   max-height: calc(100vh - 144px); /* 144px represents the combined height of the modal header and footer */
}

如果您不想使用 vh 单位，那么您可能需要在模式出现时以编程方式切换 body 上的溢出。您可能还想在更改溢出时手动设置 scrollTop 位置，这样页面就不会跳来跳去。