固定引导程序 3 模式中的标题位置 [英] Fixed header position in bootstrap 3 modal

问题描述

我想在我的 Bootstrap 模态中使用一个固定的标题，但是如果我将 .modal-header 设置为 position:fixed 它会随着模态内容一起滚动.如何在 BS modal 中创建一个真正固定的标题?

I want to use a fixed header in my Bootstrap modal, however if I set .modal-header as position:fixed it scrolls along with the moda content. How do I create a trully fixed header in BS modal?

推荐答案

与其尝试固定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;
}

这篇关于固定引导程序 3 模式中的标题位置的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！