Fixed header position in bootstrap 3 modal

css, modal-dialog, twitter-bootstrap

Solution

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.

You can easily do this using the CSS3 vh unit together with `calc`. Both vh as calc have pretty good browser support (IE9+).

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.

Set either the `height` or `max-height` to `calc(100vh - header+footer px)`.

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

See the jsfiddle

Problem

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?

Original source

Related problems