CODEWITHSUNDEEP
jquerycss
Frank G.
Frank G.

Reputation: 1579

Getting Sidebar Height to Equal Body Height

I am new to css but having a problem. I want to get the sidebar content height to match or equal the same height as the body. I am using currently but that's only good for the stating height:

   min-height: 240px;

You can find the site here: http://jsfiddle.net/ZPvLb/

Scroll down the page until you see the body and to the right is the sidebar. See the difference?

Any suggestions or help on how I could do this? Thanks!

Upvotes: 2

Views: 3452

Answers (4)

Jay Brunet
Jay Brunet

Reputation: 3750

Many solutions out there just don't work or are too complicated. (Frustrating, considering this is so easy with tables.)

It's usually the homepage that is broken because fonts and images haven't had a chance to load before sizing the sidebar, especially on a slow connection.

First, explicitly define the width and height of all of your images with CSS. If you don't specify the size of an image, the browser has no way of knowing how tall or wide (for wrapping text) the page will be.

Next, as far as web fonts, this is my solution. Simply "slide" your content into place with jQuery. This only needs to happen once on the homepage. 

$(function() {
    $("#content").slideDown('slow').promise().always(function(){
        $("#sidebar").height($("#content").height()); // drop sidebar down
    }); // Just show homepage content
});

Granted, your page will be different. Here's a more complete example.

Essentially, your sidebar gets resized after it slides into place. This keeps your sidebar from sizing itself too short before your fonts have had a chance to load.

Upvotes: 0

LCroonquist
LCroonquist

Reputation: 21

I can't believe people are actually concerned with Javascript being disabled. That is such a non-existent problem. I agree with FrankG. Disabling JS should not even be an option.

Never worry about user not having JS enabled, that should just be put to rest.

Upvotes: 2

Brombomb
Brombomb

Reputation: 7076

Since you tagged jQuery it's possible to do this using javascript.

<script type="text/javascript">
    $(document).ready( function() {
        $('.content', '#side').height($('.content', '#main').height());
    });
</script>

That will match the sidebar content height to the main content height. Put that inside the head tag, and be sure to include the jQuery library.

A pure CSS solution is going to take much more work as already pointed out.

Here's the changes included in the jsfiddle

Upvotes: 1

Winfield Trail
Winfield Trail

Reputation: 5695

This is called by some the "Holy Grail" of CSS, and for good reason: it's inordinately unintuitive to do, due mostly to the way CSS heights work.

There's hope, though: Matthew Taylor's done an excellent writeup on the problem, though I suspect that to use his solution you'll need to edit your structure a bit.

http://matthewjamestaylor.com/blog/perfect-2-column-left-menu.htm

Upvotes: 1

Related Questions