Solved

html sidebar div would extend its height down to the footer

Posted on 2014-04-30
2
421 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
Comment Utility
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
Comment Utility
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

How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

Join & Write a Comment

Suggested Solutions

CSS is a visual language used to classify objects and define rules about how they should be displayed. CSS skills aren’t restricted to developers anymore, there is a big benefit to having a basic understanding of the language, regardless of your occ…
Read about why website design really matters in today's demanding market.
The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …
Make a selection using the pen tool to trace the selection. Then alter the color of the selection by using the color balance option in Adobe Photoshop.

772 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

Need Help in Real-Time?

Connect with top rated Experts

9 Experts available now in Live!

Get 1:1 Help Now