Solved

html sidebar div would extend its height down to the footer

Posted on 2014-04-30
2
432 Views
Last Modified: 2014-05-14
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
Comment
Question by:glenn_r
2 Comments
 
LVL 17

Accepted Solution

by:
jrm213jrm213 earned 103 total points
ID: 40032438
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
 
LVL 12

Assisted Solution

by:Dean OBrien
Dean OBrien earned 102 total points
ID: 40034833
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

Best Practices: Disaster Recovery Testing

Besides backup, any IT division should have a disaster recovery plan. You will find a few tips below relating to the development of such a plan and to what issues one should pay special attention in the course of backup planning.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
Delete HTML table rows 12 29
HTML5 frame 5 25
Add box and text color changing for everything 1 25
HTML - Color not displaying correctly in EMAIL. 6 37
This article explains how to prepare an HTML email signature template file containing dynamic placeholders for users' Azure AD data. Furthermore, it explains how to use this file to remotely set up a department-wide email signature policy in Office …
Find out what you should include to make the best professional email signature for your organization.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
I designed this idea while studying technology in the classroom.  This is a semester long project.  Students are asked to take photographs on a specific topic which they find meaningful, it can be a place or situation such as travel or homelessness.…

773 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question