What's the best way to make a full page app?

General Web Dev
,
1

Supporting only modern browsers (IE11+, Chrome, FF, etc.) and disregarding mobile (maybe not completely, but it’s not important)…

####What is the best way in 2015 to make an app that stretches the full page?
Full width, Full height, No Scrolling, and something that will play well with whatever you put in it.

I know several ways to do this and the easiest for me is to make a div and stretch it with JS and using resize events. But this can’t be the best way, can it?

I know about vh, but it doesn’t seem to work very well with resizing or with using static headers/menus and it doesn’t seem to play very well with other elements in general. Or maybe I’m just using it wrong.

(I’m not looking for a static 1 size fits all answer. Feel free to discuss)

2

Dev’s advocate here, but have you considered just a background color on the body element to make the interface look full height? I just get concerned about what happens to content on small screens if not scrolling is allowed.

3

Well, no. I need 100% height for certain elements anyway. Small screens will be handled separately due to different interaction requirements.

4

@PaulOB has some great methods for full height layouts that are as bulletproof today as ever. Here are some “minimum requirements” for a full-height layout.

But perhaps it’s more the “sticky footer” scenario you need as well? Check out something like this:

1 Like
5

I guess I’d need to see what we are talking about as it does depend on the requirements a little. You can of course use display:table-cell to stretch things to fit but it does depend exactly on what elements you are trying to stretch and what they are related to.

Do you have a rough mock up (or design mock up) so that we can see what’s involved?

6

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.