3

I need a method to get the effective height of the browser window. By saying effective, I mean the area which the user actually can see.

So for example it should take into count that most mobile browsers place a "floating" navigation bar and/or a "floating" bottom button bar on the browser window, which for example can mess up $(window).height(), as it will show the total height, excluding these bars.

My scenario is the following: I need a "full-screen" dialog window which has a header, a footer and a body part between them. In case when the dialog body contains longer content, I would like the dialog body to scroll (instead of the whole document), and the header/footer to stay in the effective viewport, so that for example buttons in the footer would be always visible.

So far I haven't found a good solution to this. I've tried to tweak the Bootstrap Modal and all I could reach is a scrollable modal-body. It works great on desktop, but when I calculate the max-height of the modal-body from window height, I meet the issue on mobile browsers because the top (and/or bottom) bars will break the layout, and footer buttons slide under the bottom bar, or out of the viewport.

Zoltán Tamási
  • 12,249
  • 8
  • 65
  • 93
  • Why not just set the footer to fixed position, and set the padding-bottom of your scrolling div to be the height of your footer? This way it wont scroll behind the footer. – Gary Hayes May 12 '15 at 13:38
  • @GaryHayes I was thinking about somthing like this, but that would also stretch a dialog which has less content. Maybe I'll give it a try with some JS calculations, but seems to be messy. Probably not more messy than other solutions. – Zoltán Tamási May 12 '15 at 13:42
  • This may be a duplicate of this question: http://stackoverflow.com/questions/3044230/difference-between-screen-availheight-and-window-height – Alvaro Montoro May 12 '15 at 13:43
  • Not messy at all if you already know the height of your footer. If your footer height changes, then you have to get calculations involved. – Gary Hayes May 12 '15 at 13:43
  • @GaryHayes the problem is not with footer but with the dialog body. I would like a little margin around the dialog to look like a dialog, so using fixed positioning and page scroll would interfer with this. But probably can use your suggestion specifically for mobiles, I'll see and give some feedback. – Zoltán Tamási May 12 '15 at 13:47
  • @AlvaroMontoro no, I don't think it's duplicate. I know all of those things, but those are only related to this. – Zoltán Tamási May 12 '15 at 13:48
  • Yeah that's all I meant it for, the mobiles. Use a different media rule for larger screens. – Gary Hayes May 12 '15 at 13:49
  • Can you use `window.innerHeight`? – Alvaro Montoro May 12 '15 at 13:50
  • @AlvaroMontoro I've checked it but it doesn't seem to be reliable, see the comments at the accepted answer here: http://stackoverflow.com/questions/19039628/how-to-calculate-height-of-viewable-area-i-e-window-height-minus-address-bo – Zoltán Tamási May 12 '15 at 13:57

1 Answers1

1

Based on Gary Hayes's comment, I've managed to put together a solution for targetting specifically the small screen devices (using bootstrap). I gave up the requirement to keep the dialog small when content is small, still much more promising.

Tested it only in emulators until now, but hopefully it's gonna work on real devices too, and the big advantage is that it doesn't need the window height in any way.

I've 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
            }
        }
    }
}
Zoltán Tamási
  • 12,249
  • 8
  • 65
  • 93