I have a problem with sizing a scrolling div to fill the window, considering that I have one or more top divs and a footer div.
this is what I need +------------------+ +------------------+ +------------------+ | top1 | | top1 | | top1 | +------------------+ +------------------+ +------------------+ | top2 | | top2 | | |^| | | +------------------+ | | | +------------------+ | |^| | | | | |^| | | | | scroll | | | | | => | scroll | | => | | | | scroll | | | | | | | | | | | | | | | | | | | | | | | | | | | |v| | |v| | |v| +------------------+ +------------------+ +------------------+ | footer | | footer | | footer | +------------------+ +------------------+ +------------------+ Top1 has a fixed height.
Footer has a fixed height.
Top2 doesn't have a fixed height and sometimes doesn't even appear.
The only way I know to do that is by defining the container height, fixing its top and its bottom. But I cannot fix the top property since the top2 div has variable height...
Can someone help me?
html:
<body> <div id='top1'>Top1</div> <div id='top2'>Top2</div> <div id='container'> <ul id='data'> <li>item1</li> <li>item2</li> <li>item3</li> <li>item4</li> <li>item5</li> <li>item6</li> <li>item7</li> <li>item8</li> <li>item9</li> <li>item10</li> </ul> </div> <div id="footer">footer</div> </body> css:
body, html { height: 100%; } #top1 { width: 100%; height: 50px; background-color: #EEE; text-align: center; line-height: 50px; } #top2 { width: 100%; height: 50px; background-color: #DDD; text-align: center; line-height: 50px; } #footer { width: 100%; height: 50px; background-color: #BBB; text-align: center; line-height: 50px; position: fixed; bottom: 0; } #container { overflow: auto; width: 100%; position: absolute; top: 100px; bottom: 50px; } #data li { font-size: 30px; padding: 10px; }