7777 66

I'm trying to make a simple 2-column fluid layout without a header or footer but whenever the main content is longer than the sidebar, the sidebar refuses to stretch vertically down the entire page. It only stretches as far as my physical screen height.

(There should be a 50px margin between the end of this content area and the bottom but I'd like the div to stretch past this as well.)

Any help would be appreciated.

3 answers


I would use a 275px X 5px (or whatever height you like) completely black background image on the body that repeats vertically and not worry about height issues of your columns.

Answered almost 8 years ago by Jude Hansen
  • 275 x 1px would even do the trick. voted great answer, have been there and this is the way without getting too hacky. Jeffrey Nolte almost 8 years ago

I tried a few approaches, but they got complicated quickly. The most elegant solution might be to use javascript to adjust the left column to the right height.

Answered almost 8 years ago by Abinadi Ayerdis

if the sidebar is always less long than the browser window you could just set it to position: static; top: 0; height; 100%; in case it does not it will either get complicated or you can set overflow-y: scroll; which might not be the preferred design choice.

Answered almost 8 years ago by Alexander Knopf