我有一个这样设置的对话框:
<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.我怎样才能做到这一点?
最佳答案
如果您可以使用 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 位置,这样页面就不会跳来跳去。
关于html - 使表对话框内容可滚动,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38251102/