固定报头位置在引导3模式 [英] Fixed header position in bootstrap 3 modal

问题描述

我想在Bootstrap模式中使用固定标头，但是如果我将 .modal-header 设置为 position：fixed ，它会与moda内容一起滚动。如何在BS模式中创建一个trully固定的头？

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?

推荐答案

的身体，使其可滚动。

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 unit 以及 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）。

.modal-body {
    max-height: calc(100vh - 210px);
    overflow-y: auto;
}

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