On this webpage www.ninjawarrior.info/navtest.html I have a sidebar div, my main content div, and a footer div. My sidebar size will vary depending upon the page. If I keep the footer at a constant height of 200 px, how can I size the height of the content div such that the bottom of the footer will match up with the bottom of the sidebar?
Sizing Elements of Page to Match Up
- Thread starter etangins
- Start date
Make 'sidebar' length/height be the controling factor for 'content' element length/height
Edge
Member
Using Jquery to set column heights
Use jquery to add up the height of the content column and height of the footer and then the set height of your sidebar. This page will get you started but you'll need to modify the code provided: Equal Height Columns with JQuery
Just put the side bar in the same container as the content so it expands as the sidebar does.
Ten years or so ago I wrote a few lines of javascript to do exactly that, no framework overhead needed, I must dig it out and republish it.
Edge
Member
I'm guessing that in some instances the content will be taller than the sidebar in which case the sidebar would end up looking too short so start digging for your JS
Any luck finding it?Ten years or so ago I wrote a few lines of javascript to do exactly that, no framework overhead needed, I must dig it out and republish it.
Last edited: