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>

目前，对话框的内容对于页面而言太长，并且由于位置是固定的，因此用户永远不能向下滚动到对话框的底部。我希望只有当内容的长度超过视口区域时内部表才可滚动 - 但我总是希望页眉和页脚可见。

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位置，以便页面不会跳转。

使表格对话框内容可滚动

1 个答案: