Solved

html sidebar div would extend its height down to the footer

Posted on 2014-04-30
2
445 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 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

Free Tool: Site Down Detector

Helpful to verify reports of your own downtime, or to double check a downed website you are trying to access.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

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

This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
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 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)
Suggested Courses

636 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