Edit Question - KnowledgeHub

Title Body

I have a div with position:fixed that is my container div for some menus. I've set it to top:0px, bottom:0px to always fill the viewport. Inside that div I want to have 2 other divs, the lower one of which contains lots of lines and has overflow:auto. I would expect that it would be contained within the container div, but if there are too many lines it simply expands outside the fixed div. Below is my code and a screenshot to clarify: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>MyPlan</title> <meta name="X-UA-COMPATIBLE" value="IE=8" /> <style type="text/css"> #outerfixed { position:fixed; width:200px; background-color:blue; padding:5px; top:0px; bottom:30px;} #innerstatic1 { width:100%; background-color:yellow; height:100px;} #innerstatic2 { overflow:auto; background-color:red; width:100%;} </style> </head> <body> <div id="outerfixed"> <h3>OUTERFIXED</h3> <div id="innerstatic1"> <h3>INNERSTATIC1</h3> </div> <div id="innerstatic2"> <h3>INNERSTATIC2</h3> line<br /> ...lots of lines line<br /> </div> </div> </body> </html> Is there any way for me to do this? Again, I want #innerstatic2 to be properly contained within #outerfixed and get scrollbars if it gets bigger than the space it has inside #outerfixed. I know there are some possibilites to hack around this by also fixing #innerstatic2, but I would really like it to be within the flow inside #outerfixed if possible, so that if I move #outerfixed somewhere, the

Tags (comma-separated) Cancel