更新时间:2023-12-03 13:28:58
与其尝试固定header,不如固定body的高度,让它可以滚动.这样,页眉(和页脚)将始终可见.
Instead of trying to make the header fixed, just fix the height of the body and make it scrollable. That way the header (and footer) will always be visible.
您可以使用 CSS3 vh 单元轻松做到这一点> 与 calc
一起使用.vh 和 calc 有很好的浏览器支持 (IE9+).
You can easily do this using the CSS3 vh unit together with calc
. Both vh as calc have pretty good browser support (IE9+).
vh 单位是相对于视口(= 浏览器窗口)的高度.1 vh
是高度的 1%,100vh
表示视口高度的 100%.
The vh unit is relative to the viewport (= browser window) height. 1 vh
is 1% of the height and 100vh
means 100% of the viewport height.
我们只需要减去模态框的页眉、页脚和边距的高度.这将是困难的动态.如果这些尺寸是固定的,我们只需添加所有高度.
We just need to substract the height of the modal's header, footer and margins. It's going to be difficult it that dynamic. If those sizes are fixed, we just add all the heights.
将 height
或 max-height
设置为 calc(100vh - header+footer px)
.
Set either the height
or max-height
to calc(100vh - header+footer px)
.
.modal-body {
max-height: calc(100vh - 210px);
overflow-y: auto;
}