且构网

分享程序员开发的那些事...
且构网 - 分享程序员编程开发的那些事

固定引导程序 3 模式中的标题位置

更新时间: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 一起使用.vhcalc 有很好的浏览器支持 (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.

heightmax-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;
}