CODEWITHSUNDEEP
css
EvilAmarant7x
EvilAmarant7x

Reputation: 2069

Get div to adjust height with header content

I have a side bar that contains two divs. The first div may or may not have content, depending on what else is done on the page. The second div contains a long list of things and has a limited height, so scrolling is possible. I want to have the sidebar be as tall as the page, and I want the list container in the sidebar to be as tall as the sidebar minus the height of the header (which will change while using the page). I don't care about limiting the size of the header. The biggest is will get isn't anything significant.

Right now I'm just setting the height of the list container to be some number that is won't go over a maximized window height if the header div as as much content as it can, but this leaves an empty space at the bottom when the header is empty, and still doesn't work very well if the window is resized.

The layout is similar to this.

Is there a css solution to what I'm looking for, or will I have to use javascript and get window height/set div heights in pixels? I'm fine with either, it just seemed like there should be a CSS way to accomplish it.

Upvotes: 1

Views: 548

Answers (3)

mrBorna
mrBorna

Reputation: 1777

is this what you want? http://jsfiddle.net/YWNyr/

CSS tips:

  1. If you use 'absolute' positioning, width,height,left,top, etc... is relative to the first ancestor that has a "position" property other than "static", or the body if nothing is there.

  2. for static menus, it is common to use 'position:fixed' as it will simplify scrolling issues

  3. When using jquery its easier(and faster) to toggle a class than to change the DOM since that requires redrawing of the elements by the browser

-edit: for refreshing the sidebar size some javascript is necessary:

$('#headerAdd , #headerRemove').click( function()
  {$('#sideContainer').height($(window).height()-$("#header").height());
} );

Upvotes: 1

Jordan Foreman
Jordan Foreman

Reputation: 3888

If you're not opposed to using a little jQuery, here's a little code snippet that should help you equalize the height of the two divs, no matter which has more content. You can change it to your liking too.

var leftHeight = $(".left").height();
var rightHeight = $(".right").height();
var maxHeight = 0;
var div = "";
if (leftHeight >= rightHeight)
{
    maxHeight = leftHeight;
    div = ".right";
}
else
{
    maxHeight = rightHeight;
    div = ".left";
}

$(div).each(function(){
   if ($(this).height() > maxHeight) { maxHeight = $(this).height(); }
});

$(div).height(maxHeight);

and credit where credit is due, this is an edit of a code snipped found at css-tricks.com

Upvotes: 2

Kyle
Kyle

Reputation: 4238

Try setting the height of your list container to 100%, and your overflow to scroll:

#listContainer {
    height: 100%;
    overflow: scroll;
}

This will keep the list in a scrollpane that reaches to the bottom of the page, no matter how large the header grows or shrinks.

Upvotes: 1

Related Questions