Split page vertically in CSS (minus pixels)

I was designing an online database application recently. The layout I wanted was, I thought, fairly simple:

  • N pixel header at the top
  • The rest of the page split vertically into two panes
  • Each pane should scroll independently

Super easy to do in CSS, right? Of course not! You can't do this:

#header {  height: 50px; }

#panels {  height: 100% - 50px; }

#top, #bottom { overflow: auto; }

This is because (of course) you can't do simple arithmetic in CSS.

I can't think of a reason why it's not supported. My browser knows the height of the window at any given point in time. The browser can surely subtract two numbers. If someone knows of a solid reason why we can't do this in CSS, please clue me in.

I can think of many reasons why I would want to do it though. The above use case is just one of them.

I really dislike resorting to this (which does work, as seen here):

#header {  height: 50px; }

#panels {
    position: absolute;
    top: 50px;
    left: 0px;
    right: 0px;
    bottom: 0px;
}

#top, #bottom { overflow: auto; }

Whenever I start using absolute positioning, I know something went off the rails somewhere.

The worst part isn't that CSS doesn't support this, it's that even if CSS did suddenly support it, I couldn't use it until sometime in 2023 when all the major browsers implemented it and everyone using the old browsers switched or died of old age.

April 23, 2012 @ 2:43 PM PDT
Cateogory: Programming

2 Comments

hdhoang
Quoth hdhoang on April 23, 2012 @ 7:58 PM PDT

some browsers do now: https://developer.mozilla.org/en/CSS/calc#Browser_compatibility

Tyler Tallman
Quoth Tyler Tallman on June 22, 2012 @ 1:40 PM PDT

You can do it with flexbox if you do not mind the cutting edge

Speak your Mind

You can use Markdown in your comment.
Email/URL are optional. Email is only used for Gravatar.

Preview