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

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

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

解决方法

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

您可以使用CSS3 vh unit和calc轻松完成此操作.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

. ..