css – 修复了bootstrap 3模式中的标题位置

前端之家收集整理的这篇文章主要介绍了css – 修复了bootstrap 3模式中的标题位置前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我想在我的Bootstrap模式中使用固定的标头,但是如果我将.modal-header设置为position:fixed,它会与moda内容一起滚动.如何在BS模态中创建trully固定标头?

解决方法

不要试图修复标题,只需修复主体的高度并使其可滚动即可.这样,标题(和页脚)将始终可见.

您可以使用CSS3 vh unitcalc轻松完成此操作.07​​002和calc都有非常好的浏览器支持(IE9).

vh单位相对于视口(=浏览器窗口)高度. 1 vh是高度的1%,100vh表示视口高度的100%.

我们只需要减去模态的页眉,页脚和边距的高度.这种动态很难实现.如果这些尺寸是固定的,我们只需添加所有高度.

将高度或最大高度设置为calc(100vh – 页脚页脚px).

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

See the jsfiddle

猜你在找的CSS相关文章