?
Solved

html sidebar div would extend its height down to the footer

Posted on 2014-04-30
2
Medium Priority
?
452 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
2 Comments
 
LVL 17

Accepted Solution

by:
jrm213jrm213 earned 412 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 408 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

On Demand Webinar: Networking for the Cloud Era

Ready to improve network connectivity? Watch this webinar to learn how SD-WANs and a one-click instant connect tool can boost provisions, deployment, and management of your cloud connection.

Question has a verified solution.

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

When crafting your “Why Us” page, there are a plethora of pitfalls to avoid. Follow these five tips, and you’ll be well on your way to creating an effective page.
Originally, this post was published on Monitis Blog, you can check it here . Websites are getting bigger and more complicated by the day. Video, images and custom fonts are all great for showcasing your product or service. But the price to pay in…
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…
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 …
Suggested Courses

719 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