我想在我的Bootstrap模式中使用固定的标头,但是如果我将.modal-header设置为position:fixed,它会与moda内容一起滚动.如何在BS模态中创建trully固定标头?
解决方法
不要试图修复标题,只需修复主体的高度并使其可滚动即可.这样,标题(和页脚)将始终可见.
您可以使用CSS3 vh unit和calc
轻松完成此操作.07002和calc都有非常好的浏览器支持(IE9).
vh单位相对于视口(=浏览器窗口)高度. 1 vh是高度的1%,100vh表示视口高度的100%.
我们只需要减去模态的页眉,页脚和边距的高度.这种动态很难实现.如果这些尺寸是固定的,我们只需添加所有高度.
将高度或最大高度设置为calc(100vh – 页脚页脚px).
.modal-body { max-height: calc(100vh - 210px); overflow-y: auto; }