Home » Setting Up a Web Page to Behave Like an App

Setting Up a Web Page to Behave Like an App

Hi Everyone,

With the growing use of native apps, there is less of a tendency to set up a web page like an app. As such, there are a few challenges one might encounter when initially settings up a web page to look like an app.

Typically, a web app setup means that there is a static header and static footer which sandwiches a content section that is used to obviously display content. One of the tricky parts is getting the content section height to size correctly so that the footer sits precisely on the bottom of the viewport.

Take a look at this fiddle: http://jsfiddle.net/rohanbhangui/abcohmsv/ . It illustrates how to get the desired result.

Cheers!

Update (25/11/2014): the calc() method was introduced after ie9 (which itself has limited support. See here) so this may not work for ie8 and below. will keep people posted on a non calc solution.

Update (11/12/2014): non calc solution: http://jsfiddle.net/rohanbhangui/Lukrq1a2/

Leave a Reply

Your email address will not be published. Required fields are marked *