Jump to content

Align sidebar height to main content


mike_g
 Share

Recommended Posts

I have a page where the content is being drawn from an SQL query. This means that the height of the main section in my page is variable. The page sections are laid out in Divs using css (not tables). The problem with this is that is that I cant get my sidebar and container to expand with the content.Is there a way to do this in PHP? Cheers.

Link to comment
Share on other sites

Well I know it can be done in Javascript, but I want to avoid that if possible.As for CSS, how do you do that then?Heres an example of what I have:

#sidebar{	background-color: rgb(00, 40, 20);	min-height: 554px;	max-height: 100%;	width: 177px;	float: left;	}

Link to comment
Share on other sites

You are absolutely correct to mess around with the min- and max- values. With that code, your container div should size itself to fit the content, at least until it hits the bottom of the window. I'm not sure what's in your sidebar, but if it's content isn't variable it won't grow with the container unless you tell it to, and that means Javascript. Do you have a reason for avoiding Javascript, or are you just unfamiliar? If the latter, here's the only of code you'd really need. You could put it in an onload function. There might be a little flicker, but users expect that while loading:function myOnload(){

s = document.getElementById('sidebar');c = document.getElementById('container');s.style.height = c.offsetHeight;

}Then your body tag could look like this:<body onload='myOnload();'>Now, if your container isn't sizing itself to the content, something else is going on, and we need to see more code.

Link to comment
Share on other sites

You are absolutely correct to mess around with the min- and max- values. With that code, your container div should size itself to fit the content, at least until it hits the bottom of the window. I'm not sure what's in your sidebar, but if it's content isn't variable it won't grow with the container unless you tell it to, and that means Javascript. Do you have a reason for avoiding Javascript, or are you just unfamiliar? If the latter, here's the only of code you'd really need. You could put it in an onload function. There might be a little flicker, but users expect that while loading:function myOnload(){

s = document.getElementById('sidebar');c = document.getElementById('container');s.style.height = c.offsetHeight;

}Then your body tag could look like this:<body onload='myOnload();'>Now, if your container isn't sizing itself to the content, something else is going on, and we need to see more code.

Shouldn't that bes.style.height = c.offsetHeight + "px";?
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...