Design + Coding > Full Height Columns
Actually, this is better:
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
<!--
$(function(){
if ( $("#content").height() > $("body").height() ) {
$("#sidebar1Wrapper, #sidebar2Wrapper").height($("#content").outerHeight());
} else if ( $("#content").height() < $("body").height() ) {
$("#sidebar1Wrapper, #sidebar2Wrapper").height($("body").outerHeight());
}
});
-->
</script>
VUELA
Thank Vuela and Chris for posting this, this is very cool.
Jeremy Blanchard
I second the thanks on this one Veula and Chris. I have been doing a weird CSS faux column workaround that didn't feel right; but using jQuery is a great solution!
Matthew Latkiewicz
I am using a Tuscany variant, and the above doesn't work... see example here:
http://e-motionimages.squarespace.com/services-prices/
(looks OK in Firefox but not in Safari)
Suggestions?
miko
Hi,
I have tried to implement this on one of my sites, but it is not working at all. Would somebody please help me and take a look?
http://solaresystems.squarespace.com
Thanks in advance,
-Michael
Michael McG
Hi Michael,
Although you can use jQuery or other scripting method to get equal column heights, here is a much simpler solution that requires CSS only.
Try this:
/*--- Equal Height Columns ---*/
#sidebar1Wrapper { padding-bottom:2000px; margin-bottom:-2000px; }
#contentWrapper { padding-bottom:2000px; margin-bottom:-2000px; }
Now the 2000 number is arbitrary and may change depending on your specific needs of the page. Just needs to be a large enough value than the max of your largest column. This will force both columns to be equivalent and line up at the bottom.
Hope that helps!
Chris Cox
Chris Cox
Chris I love your solution here --- the easier the better! Thank you for sharing it! :)
sib
Thanks Chris,
This swallowed up my footer in main column for some reason, but Ill just use code injection after canvas for that.
Much appreciated.
-Michael
Michael McG
Was anybody else able to get this to work? I tried both solutions and my sidebar didn't move.
Eric Oltersdorf
Eric,
Yes, I got both to work, but there is a big issue with both options. If the content height that you are gaging height against changes, or falls shorter than what you are trying to extend, the sidebar backgounds will be shorter and visa versa. You will constantly keep having to adjust.
Simple solution is to create an image 1px high X the width of your canvas. Mark off with a pixel where you want borders (if any), and color in (as background color) the areas where your Canvas and Sidebars would be located. Upload it to your storage area, and set it as the Canvas background in the Appearance Editor. Also, make sure you set it to repeat vertically.
Regards,
Michael Zampino
SS Site: mzampino.com
Michael Zampino
Thanks for the reply, Michael. That worked pretty well. The issue now is that I had a gap between the footer and the main content which has now been taken over by the column image I created. You can see a screen capture here.
http://screencast.com/t/z6bnlB9y
The green border is the top of my footer and the purple border is the bottom of my content. I suppose I could use code injection after the canvas as Michael McG suggested to create a footer.
I did also have a gap between the header image and the navigation which the column image has also filed in. Not sure what to do about that.
Eric Oltersdorf
Eric,
Let me know if you still want the gaps or not.
If you don't want them, you can easily play with the Margins to close the gaps.
If you still want the gaps, with a little CSS we can move the Background image from the #canvas to the #pagebodywrapper Div, so it will only show behind the content and the sidebar. I haven't done this yet in Squarespace, but it would be fun to give it a shot.
Let me know...
Regards,
Michael
Michael Zampino
This would be the CSS... You would need to Clear Out the image in the Canvas section first, then paste this into your Custom CSS Section and changing the path to your image.
#pagebodywrapper {padding: 0px 0px 0px 0px; margin: 0px 0px 0px 0px; background-image: url(/storage/your/image/here.123); background-repeat: repeat-y;}
Give it a shot, and let me know...
Michael Zampino
Thanks Michael. I'll mess with this tonight and let you know how it goes.
Eric Oltersdorf
With the help of Chris Cox, we have found what I think is the best method to date to get your columns (sidebar1, sidebar2) to run the full height of the page, top to bottom, regardless of the amount of content -- using a tiny bit of jQuery code that is very easy to implement and is also very flexible!!
To use this method, go into website configuration > website settings > code injection and in the <head> code injection point insert the following:
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
<!--
$(function(){
if ( $("#content").height() > $("#sidebar1Wrapper").height() ) {
$("#sidebar1Wrapper, #sidebar2Wrapper").height($("#content").outerHeight());
} else if ( $("#content").height() < $("body").height() ) {
$("#sidebar1Wrapper, #sidebar2Wrapper").height($("body").outerHeight());
}
});
-->
</script>
Works like a charm!