How do I get the effective window height in cross browser and cross platform?
I need a method to get the effective height of the browser window. Effectively speaking, I mean an area that the user can actually see.
So, for example, keep in mind that most mobile browsers put a "floating" navigation bar and / or a "floating" bottom button bar in the browser window, which, for example, can mess up $(window).height()
since it will show the total height excluding those columns.
My scenario is as follows: I need a full screen dialog that has a header, footer and body part in between. If the dialog body contains longer content, I would like the dialog body to scroll (rather than the entire document) and the header / footer to remain in the effective viewport so that, for example, the buttons in the footer are always visible.
So far, I haven't found a good solution. I tried to customize Bootstrap Modal and all I could achieve is scrollable modal-body
. It works fine on desktop, but when I calculate max-height
from modal-body
from window height I run into a problem with mobile browsers because the header (and / or bottom) bars break the layout and the footers slide under the bottom bar or out of the viewport.
source to share
Based on Gary Hayes' comment, I was able to put together a solution for targeting small screen devices (using bootstrap). I dropped the requirement to keep dialogue small when the content is small but much more promising.
Only tested it in emulators so far, but hopefully it will work on real devices too, and the big advantage is that it doesn't need window height anyway.
I have implemented it in LESS like this:
@media (max-width: @screen-sm-max) {
.modal {
padding-right: 0 !important;
position: fixed;
.modal-dialog, .modal-content {
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
.modal-content {
.modal-header {
position: fixed;
top: 0;
left: 0;
right: 0;
}
.modal-footer {
position: fixed;
bottom: 0;
left: 0;
right: 0;
}
.modal-body {
position: fixed;
left: 0;
right: 0;
top: 60px; // height of header, calculated precisely in JS on shown.bs.modal handler
bottom: 60px; // height of footer, calculated precisely in JS on shown.bs.modal handler
}
}
}
}
source to share