Jump to content

Stretch div to full height


ShadowMage
 Share

Recommended Posts

I have the following test code set up to illustrate my problem:

<!DOCTYPE html><html><head><title>Test Page</title><style type='text/css'>* {    margin: 0px;    padding: 0px;}html, body {    height: 100%;}body {    width: 960px;    margin: 0px auto;}#header {    height: 100px;    font-size: 36pt;    font-weight: bold;    background-color: #999;}#content {    background-color: #ccc;}#sidebar {    width: 115px;    border-right: 2px ridge #999;    padding: 0px 4px;    margin-right: 8px;    float: left;}#sidebar .col1, #sidebar .col2 {    padding: 1px 4px;    float: left;}#sidebar>.col1, #sidebar>.col2 {    font-weight: bold;}#sidebar .col1 {    width: 71px;}#sidebar .col2 {    width: 28px;}</style></head><body><div id='header'>This is my header</div><div id='content'>    <div id='sidebar'>	    <div class='col1'>Header 1</div>	    <div class='col2'>Hdr2</div>	    <div id='itemList'>		    <div class='col1'>Item</div>		    <div class='col2'>0</div>		    <div class='col1'>Item</div>		    <div class='col2'>0</div>		    <div class='col1'>Item</div>		    <div class='col2'>0</div>		    <div class='col1'>Item</div>		    <div class='col2'>0</div>		    <div class='col1'>Item</div>		    <div class='col2'>0</div>		    <div class='col1'>Item</div>		    <div class='col2'>0</div>		    <div class='col1'>Item</div>		    <div class='col2'>0</div>		    <div class='col1'>Item</div>		    <div class='col2'>0</div>		    <div class='col1'>Item</div>		    <div class='col2'>0</div>		    <div class='col1'>Item</div>		    <div class='col2'>0</div>		    <div class='col1'>Item</div>		    <div class='col2'>0</div>		    <div class='col1'>Item</div>		    <div class='col2'>0</div>		    <div class='col1'>Item</div>		    <div class='col2'>0</div>		    <div class='col1'>Item</div>		    <div class='col2'>0</div>	    </div>    </div>    <p>This is some content</p>    <p>This is some content</p>    <p>This is some content</p>    <p>This is some content</p>    <p>This is some content</p>    <p>This is some content</p>    <p>This is some content</p>    <p>This is some content</p></div></body></html>

I am trying to get the #content div to stretch to the bottom of the browser window. I also want the #itemList div to stretch to the bottom of the content div, but not to exceed it should there be more items than will fit in that space (in other words it should be the full height of the content div, but scroll if there is too much content).I just can't seem to wrap my head around how this can be accomplished. I have tried a wide variety of things including various "sticky footer" techniques, but nothing seems to work. The sticky footer techniques work for footers (obviously), but not when there is a header. This is a very common thing and I feel like I should know how to do this...Can anybody help me?

Link to comment
Share on other sites

I made a few changes/additions.I hope this is what you want/need....

<!DOCTYPE html><html><head><title>Test Page</title><style type='text/css'>* {	margin: 0px;	padding: 0px;}html, body {	height: 100%;}body {	width: 960px;	margin: 0px auto;}#header {	height: 100px;	font-size: 36pt;	font-weight: bold;	background-color: #999;}#content {	 height:84%;	 background-color: #ccc;}#sidebar {	width: 150px;	max-height:100%;	border-right: 2px ridge #999;	padding: 0px 4px;	margin-right: 8px;	float: left;	overflow:auto;}#sidebar .col1, #sidebar .col2 {	padding: 1px 4px;	float: left;}#sidebar>.col1, #sidebar>.col2 {	font-weight: bold;}#sidebar .col1 {	width: 71px;}#sidebar .col2 {	width: 28px;}</style></head><body><div id='header'>This is my header</div><div id='content'>	<div id='sidebar'>			<div class='col1'>Header 1</div>			<div class='col2'>Hdr2</div>			<div id='itemList'>					<div class='col1'>Item</div>					<div class='col2'>0</div>					<div class='col1'>Item</div>					<div class='col2'>0</div>					<div class='col1'>Item</div>					<div class='col2'>0</div>					<div class='col1'>Item</div>					<div class='col2'>0</div>					<div class='col1'>Item</div>					<div class='col2'>0</div>					<div class='col1'>Item</div>					<div class='col2'>0</div>					<div class='col1'>Item</div>					<div class='col2'>0</div>					<div class='col1'>Item</div>					<div class='col2'>0</div>					<div class='col1'>Item</div>					<div class='col2'>0</div>					<div class='col1'>Item</div>					<div class='col2'>0</div>					<div class='col1'>Item</div>					<div class='col2'>0</div>					<div class='col1'>Item</div>					<div class='col2'>0</div>					<div class='col1'>Item</div>					<div class='col2'>0</div>					<div class='col1'>Item</div>					<div class='col2'>0</div>					<div class='col1'>Item</div>					<div class='col2'>0</div>					<div class='col1'>Item</div>					<div class='col2'>0</div>					<div class='col1'>Item</div>					<div class='col2'>0</div>					<div class='col1'>Item</div>					<div class='col2'>0</div>					<div class='col1'>Item</div>					<div class='col2'>0</div>					<div class='col1'>Item</div>					<div class='col2'>0</div>					<div class='col1'>Item</div>					<div class='col2'>0</div>					<div class='col1'>Item</div>					<div class='col2'>0</div>					<div class='col1'>Item</div>					<div class='col2'>0</div>					<div class='col1'>Item</div>					<div class='col2'>0</div>					<div class='col1'>Item</div>					<div class='col2'>0</div>					<div class='col1'>Item</div>					<div class='col2'>0</div>					<div class='col1'>Item</div>					<div class='col2'>0</div>					<div class='col1'>Item</div>					<div class='col2'>0</div>					<div class='col1'>Item</div>					<div class='col2'>0</div>					<div class='col1'>Item</div>					<div class='col2'>0</div>					<div class='col1'>Item</div>					<div class='col2'>0</div>					<div class='col1'>Item</div>					<div class='col2'>0</div>					<div class='col1'>Item</div>					<div class='col2'>0</div>					<div class='col1'>Item</div>					<div class='col2'>0</div>					<div class='col1'>Item</div>					<div class='col2'>0</div>					<div class='col1'>Item</div>					<div class='col2'>0</div>					<div class='col1'>Item</div>					<div class='col2'>0</div>					<div class='col1'>Item</div>					<div class='col2'>0</div>					<div class='col1'>Item</div>					<div class='col2'>0</div>					<div class='col1'>Item</div>					<div class='col2'>0</div>					<div class='col1'>Item</div>					<div class='col2'>0</div>					<div class='col1'>Item</div>					<div class='col2'>0</div>					<div class='col1'>Item</div>					<div class='col2'>0</div>					<div class='col1'>Item</div>					<div class='col2'>0</div>					<div class='col1'>Item</div>					<div class='col2'>0</div>					<div class='col1'>Item</div>					<div class='col2'>0</div>					<div class='col1'>Item</div>					<div class='col2'>0</div>					<div class='col1'>Item</div>					<div class='col2'>0</div>					<div class='col1'>Item</div>					<div class='col2'>0</div>					<div class='col1'>Item</div>					<div class='col2'>0</div>					<div class='col1'>Item</div>					<div class='col2'>0</div>					<div class='col1'>Item</div>					<div class='col2'>0</div>					<div class='col1'>Item</div>					<div class='col2'>0</div>					<div class='col1'>Item</div>					<div class='col2'>0</div>					<div class='col1'>Item</div>					<div class='col2'>0</div>					<div class='col1'>Item</div>					<div class='col2'>0</div>			</div>	</div>	<p>This is some content</p>	<p>This is some content</p>	<p>This is some content</p>	<p>This is some content</p>	<p>This is some content</p>	<p>This is some content</p>	<p>This is some content</p>	<p>This is some content</p></div></body></html>

Link to comment
Share on other sites

try this one......

<!DOCTYPE html><html><head><title>Test Page</title><style type='text/css'>* {    margin: 0px;    padding: 0px;}html, body {    height: 100%;}body {    width: 960px;    margin: 0px auto;}#header {    height: 100px;    font-size: 36pt;    font-weight: bold;    background-color: #999;}#content {    background-color: #ccc;}#sidebar {    width: 115px;    border-right: 2px ridge #999;    padding: 0px 4px;    margin-right: 8px;    float: left;}#sidebar .col1, #sidebar .col2 {    padding: 1px 4px;    float: left;}#sidebar>.col1, #sidebar>.col2 {    font-weight: bold;}#sidebar .col1 {    width: 71px;}#sidebar .col2 {    width: 28px;}</style></head><body><div id='header'>This is my header</div><div id='content'>    <div id='sidebar'>		    <div class='col1'>Header 1</div>		    <div class='col2'>Hdr2</div>		    <div id='itemList'>				    <div class='col1'>Item</div>				    <div class='col2'>0</div>				    <div class='col1'>Item</div>				    <div class='col2'>0</div>				    <div class='col1'>Item</div>				    <div class='col2'>0</div>				    <div class='col1'>Item</div>				    <div class='col2'>0</div>				    <div class='col1'>Item</div>				    <div class='col2'>0</div>				    <div class='col1'>Item</div>				    <div class='col2'>0</div>				    <div class='col1'>Item</div>				    <div class='col2'>0</div>				    <div class='col1'>Item</div>				    <div class='col2'>0</div>				    <div class='col1'>Item</div>				    <div class='col2'>0</div>				    <div class='col1'>Item</div>				    <div class='col2'>0</div>				    <div class='col1'>Item</div>				    <div class='col2'>0</div>				    <div class='col1'>Item</div>				    <div class='col2'>0</div>				    <div class='col1'>Item</div>				    <div class='col2'>0</div>				    <div class='col1'>Item</div>				    <div class='col2'>0</div>		    </div>    </div>  <div style="float:left">  <p>This is some content</p>    <p>This is some content</p>    <p>This is some content</p>    <p>This is some content</p>    <p>This is some content</p>    <p>This is some content</p>    <p>This is some content</p>    <p>This is some content</p>    <p>This is some content</p>    <p>This is some content</p>    <p>This is some content</p><p>This is some content</p><p>This is some content</p>    </div>    <div style=" clear:both"></div></div></body></html>

Edited by manojnaanak
Link to comment
Share on other sites

@scout1idfYours comes very close to what I need. Only two things:- The content does not stretch the full height of the window.- The entire sidebar scrolls. I would like, if possible, for only the #itemList div to scroll. Perhaps what I'm asking for is not even possible...If that is the case, I can work with what you gave me. I think I know how to make the #itemList scroll, but I'm still not sure how to stretch the #content...@manojnaanakI did not see any difference between your code and mine. What did you change?

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...