Full-height app layouts: A CSS trick to make it easier

Posted on October 5, 2011

In HTML layouts, there’s a fundamental difference between width and height. The natural state of affairs is that your page’s width is constrained to the width of the browser window, but its height is unconstrained – it grows however tall is necessary to contain its contents.

That makes sense for documents, but it’s a pain for application UIs. Native application UIs tend to slice up the screen both horizontally and vertically into a nested set of panels, some of which may scroll/resize, others being docked against particular edges of their parent panes.

So, what’s the robust way, with HTML/CSS, to set up a nested collection of panes that exactly divide both the width and height of the browser window?

Hang on, didn’t we have this one solved back in 1999?

Hmm… this reminds me of something… I remember: the <frameset> tag from HTML 4. Yes, HTML frames do divide the browser window both horizontally and vertically, exactly consuming the available screen area. So why don’t we use them any more? There are loads of reasons, including:

What you’re building is logically one page, but technically each frame is a separate HTML document, which makes interactions between them so much more complex

It’s not really practical to support deep-linking to (i.e., bookmarking) particular UI states

Mobile devices and tablets have very limited support for HTML 4 frames. iOS in particular requires the user to use two-fingered scrolling within panes. This is UX death.

OK, so what’s the 21st century solution?

I’ve used lots of hacks and tricks over the years to get columns and panes into my web applications, often involving JavaScript, $(…).height(…), window.body.clientHeight, and the onresize event. Ugh. Fragile and messy. But at long last this week I learned there is actually an elegant and robust way to set up nested exact-height panes with pure CSS, and it works on all browsers back to IE 7, even on current mobile browsers that don’t support position:fixed.

You know that if you set position: absolute on an element, then you can make it appear at a specified distance from the top, left, right, or bottom from its parent element. Well, it turns out that you can specify both top and bottom, or both leftandright, and then it will dock against both edges and always resize to match its parent’s dimensions.

… but that’s pretty boring to look at, so here’s a version where I threw in a rough effort of some iPad-like styling:

Here’s a live example. It still renders correctly on very small screens (like a WP7 or iPhone) but this 2-column layout really needs a wider screen to be usable.

Enabling touch scrolling

The scrolling looks and works fine on a desktop browser, but on a mobile browser it varies:

On WP7, you’ll see no scrollbars, but you’ll get one-finger touch scrolling, without the lovely inertia/momentum effect. This is kind-of OK, though imperfect.

On iOS, you’ll see no scrollbars, and it requires two-finger scrolling (which is horrible), and it won’t use the inertia/momentum effect either. Badness.

There are similar problems on Android

With iOS 5, it will be possible to enable fluid, native touch-based momentum scrolling to our divs just by making a tiny tweak to the CSS, thanks to the new “touch scrolling” feature:

.scroll-x,.scroll-y{ -webkit-overflow-scrolling: touch;}

I really hope this catches on and becomes a standard.

But in the meantime, for visitors on other mobile OSes, and until iOS 5 becomes prevalent, you can use the open-source iScroll library that provides one-finger momentum scrolling for Webkit (iOS and Android) and Mozilla browsers.

Enabling momentum scrolling on any given element requires only one line of JavaScript (assuming you’ve referenced iScroll.js):

new iScroll(theElementYouWantToEnableItFor);

For my example, I used the following block of JavaScript, which enables touch scrolling on all the .scroll-x and .scroll-y elements:

You could do this in fewer lines if you’re using a library like jQuery or XUI (which is a tiny implementation of a small part of the jQuery API surface, intended for mobiles). Here’s the resulting mobile-style scrollbar:

19 Responses to Full-height app layouts: A CSS trick to make it easier

Lucian Maran

Hello, I like your ideia…it’s clean and smart, but what about an open source JQuery library like http://layout.jquery-dev.net/?
I used it (only 33k, free) for my demo project with fixed height, autoresize, collapsible and cross-browser layout.
You can skip over my text (sorry for the language) and go directly to the LiveDemo link.http://mozaic.codeplex.com/

Anyway, I will bookmark your post for the touch-scrolling technique.
Thank you!

Application-style UI layout is the current major failing of CSS. I’m keenly watching the various new CSS3 modules (e.g. http://www.w3.org/TR/css3-grid-layout/ ) My hope is that once a few modern browsers implement them, someone will create a decent JavaScript implementation to back port to old browsers.

For now though, position: absolute seems like the least worst option. I’m certainly making use of it in my apps.

Hi,
Looks like somthing I need or not, I am new to css and I am trying to create 3 equal height colums (eg. the longest column should determine the height of all the colums). I do not want my footer to be fixed/always visible and have the main content scroll as in your example.

Is it possible to create such a layout with the techniqe you mention? or do I need faux-colums or any of the other trick I read about elsewhere.

Great post. Have you experimented with media queries? Couldn’t that make it even more flexible? Like having one version for all devices and then have the UI to adjust to the screen size. The navigation panel could for example go on top if the screen size is smaller than on a tablet, ot if take up to much space you could add some funky javascript to create a drop down of the panel.

Very nice – this was exactly what I didn’t know I was looking for! I re-did my full panel app using this and it greatly simplified my code. Here’s a nifty extension: making inner panes resizable. Let’s say you have 2 main content pane divs ‘A’ and ‘C’ separated by a slim gutter div ‘B’. E.g.:

|————A————|-B-|——–C——–|

The key is to make B draggable, and dynamically resize A and C. What’s nice about this layout technique is that it becomes really simple. Using JQuery’s Draggable extension, the code looks like:

You are a champion Steve. I didn’t think it should be that hard to get divs to play nicely, but up until now I was having limited success. Your solution worked a treat, tested in chrome(15.0), ie(8.0), firefox(8.0) and safari(5.1.1) thanks heaps.

We are a bunch of volunteers and opening a brand new scheme in our community. Your web site provided us with valuable information to paintings on. You have done an impressive task and our whole group will likely be grateful to you.