Posted By: user137726
I have a site with the following structure:
<div id="header"></div> <div id="main"> <div id="navigation"></div> <div id="content"></div> </div> <div id="footer"></div>
The navigation is on the left and the content div is on the right. The information for the content div is pulled in through PHP, so it’s different every time.
How can I scale the navigation vertically so that its height is the same as the content div’s height, no matter which page is loaded?
NOTE: This answer is applicable to legacy browsers without support for the Flexbox standard. For a modern approach, see: https://stackoverflow.com/a/23300532/1155721
I suggest you take a look at Equal Height Columns with Cross-Browser CSS and No Hacks.
Basically, doing this with CSS in a browser compatible way is not trivial (but trivial with tables) so find yourself an appropriate pre-packaged solution.
Also, the answer varies on whether you want 100% height or equal height. Usually it’s equal height. If it’s 100% height the answer is slightly different.