I want this page to have a fixed top and a bottom that will fill the remaining viewport. The bottom will be used to display jpg's. When the jpg's are too big I want scroll bars to appear only in the bottom section. I have tried every combination I think of fixed & absolute for the 3 divs and none have given me the functionality I'm looking for. The code below shows the horizontal scroll bar when needed but not the vertical. Any help would be great. Here's what I have:
<body>
<style>
body
{
margin: 0;
padding: 0;
border: 0;
}
#Top
{
position: fixed;
left: 0;
top: 0;
height: 200px;
width: 100px;
background: red;
}
#Bottom
{
position: fixed;
top: 200px;
width: 100%;
background: green;
overflow: auto;
}
#Content
{
width:100%;
height: 100%;
background: purple;
overflow: auto;
}
</style>
<body>
<div id="Top">
</div>
<div id="Bottom">
<div id="Content">
<!-- This is just a blue box that should cause scroll
bars to appear when the viewport is resized too small.-->
<img src="Blue500x1000.jpg">
</div>
</div>
</body>
