Go Premium for a chance to win a PS4. Enter to Win

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 458
  • Last Modified:

html sidebar div would extend its height down to the footer

I have a page with the following div's
footer
sidebar | content
footer

I've set the html and body height to 100% to force them to fill there container. I'd like the sidebar height to stretch down to the footer. If the sidebar and content have a few values this appears to work. As soon as the content section has more values than it can contain it automatically grows, which forces the footer down the page. This is fine but then the sidebar doesn't seem to grow. I've thought about changing the body to the same color as the sidebar to fake it out but there must be a way to fix this. See sample code here https://gist.github.com/anonymous/11418037
0
glenn_r
Asked:
glenn_r
2 Solutions
 
jrm213jrm213Commented:
Unfortunately I don't know that there is any way to do that with HTML, height is and always has been a problem. People like things to line up, especially designers, but on the web in it's current state I don't think it's possible. Setting height to 100% generally doesn't do anything in my experience. If I have something where I need to force two containers to be the same height, I use javascript/jquery to force it by changing the css and setting actual pixel heights for the containers.
0
 
Dean OBrienCommented:
Try something like this:
<html>
<head>
<style>
	.container {margin:auto;width:800px}
	.header, .footer {height:100px;width:800px;background:#f00;}
 	.content {position:relative}
 	.content p {margin-left:220px}
	.sidebar {position:absolute;left:0;top:0;width:200px;height:100%;background:#fcc}
</style>
</head>
<body>
<div class="container">
	<div class="header">&nbsp;</div>
	<div class="content">
		<div class="sidebar">&nbsp;</div>
		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras in sapien fermentum, viverra neque et, lobortis velit. Vestibulum lacinia libero vitae cursus vehicula. Sed libero arcu, imperdiet varius nibh nec, vehicula aliquam diam. Vestibulum ut ultrices diam. Fusce neque sem, ornare ac facilisis sed, ullamcorper a ligula. Integer tincidunt nulla vitae urna porttitor, sit amet fringilla risus porttitor. Nulla fermentum augue id justo lobortis laoreet. Ut ultrices tincidunt iaculis. Donec sed mauris malesuada, rhoncus diam quis, tincidunt nibh. Nullam tempor augue eu urna pellentesque tempus.</p>

		<p>Cras semper at magna sed lacinia. Aliquam et purus arcu. Praesent purus tortor, lobortis sit amet vulputate a, elementum ut nulla. Sed dignissim dictum sem at placerat. Cras nec velit vitae urna tristique molestie. Interdum et malesuada fames ac ante ipsum primis in faucibus. Integer id arcu volutpat, hendrerit enim id, adipiscing mauris.</p>

		<p>Donec nec laoreet turpis. Integer porttitor ipsum eu adipiscing hendrerit. Nam nec scelerisque velit. Donec sit amet velit ullamcorper, aliquet arcu non, tempor massa. Ut et tellus dui. Sed molestie, nisi nec scelerisque gravida, elit ligula rutrum mi, sed malesuada enim orci varius mi. Sed enim sapien, commodo sed pulvinar eu, rhoncus non quam.</p>

		<p>Nulla consequat varius dui, id aliquet odio euismod ut. Etiam at fermentum nisl, at commodo velit. Phasellus nibh sapien, ornare eget sapien ut, blandit bibendum turpis. Suspendisse tempor viverra purus sed tempus. Etiam sodales, metus eu venenatis imperdiet, massa est ornare arcu, ac ornare lacus turpis quis massa. Mauris non purus vel sapien facilisis sollicitudin eget in lorem. Pellentesque scelerisque purus vitae nulla ultricies tincidunt. Aliquam nunc eros, fringilla sit amet turpis vitae, condimentum dictum libero. Mauris vulputate tellus at libero dapibus, in accumsan libero elementum. Mauris sed quam ante. Suspendisse accumsan mi ac metus feugiat, quis venenatis nibh tempor. Sed tincidunt, tortor ullamcorper condimentum porta, orci neque dignissim ipsum, at ornare diam turpis eu mauris. Vestibulum ac interdum felis. Quisque at augue id est condimentum sagittis.</p>

		<p>Proin commodo ultrices leo, ac dignissim ante. Fusce sit amet erat in est scelerisque lobortis dictum vitae magna. Phasellus ultricies, odio et tincidunt ornare, urna lorem gravida nisl, eget consequat diam nunc id purus. Nullam condimentum elit et libero facilisis elementum. Nullam venenatis dolor neque, id luctus dolor hendrerit auctor. Sed at dapibus nunc. Phasellus quam nibh, fermentum in varius vel, dapibus in nisi. Aenean tempor ultricies elit, ut elementum quam ullamcorper at. Nulla hendrerit risus ut quam lacinia ullamcorper. Pellentesque et nisi id ligula malesuada elementum in eu velit.</p>
	</div>
	<div class="footer">&nbsp;</div>
</div>
</body>
</html>

Open in new window

0

Featured Post

[Webinar] Cloud and Mobile-First Strategy

Maybe you’ve fully adopted the cloud since the beginning. Or maybe you started with on-prem resources but are pursuing a “cloud and mobile first” strategy. Getting to that end state has its challenges. Discover how to build out a 100% cloud and mobile IT strategy in this webinar.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now