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?
See Question&Answers more detail:osI 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?
See Question&Answers more detail:osInstead 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;
}