ShadowMage Posted November 30, 2012 Share Posted November 30, 2012 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 More sharing options...
scout1idf Posted December 1, 2012 Share Posted December 1, 2012 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 More sharing options...
manojnaanak Posted December 3, 2012 Share Posted December 3, 2012 (edited) 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 December 3, 2012 by manojnaanak Link to comment Share on other sites More sharing options...
ShadowMage Posted December 3, 2012 Author Share Posted December 3, 2012 @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 More sharing options...
dsonesuk Posted December 3, 2012 Share Posted December 3, 2012 hes used clear: both; so container can pick up bottom edge of side side panel, normally you would use overflow:hidden; but doing so in this case would cause it to cut/hide the overlapping content element. Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now