My goal is straightforward - I have a fixed div at the bottom of my page that always needs to be visible. Inside this div, there are two sub-divs; one small div should always be on top, and the other should be scrollable.
The issue lies with the small div - if I give it a position of fixed, it appears at the top of the window instead of on top of the fixed div itself, as demonstrated in this example.
Alternatively, positioning the small div as absolute places it on top of the fixed div, but when scrolled, it behaves erroneously, illustrated here: fiddle
Here's the HTML:
<div class="bottom">
<div class="top"></div>
<div class="content"></div>
</div>
And the CSS:
.bottom
{
padding:20px;
height: 253px;
position: fixed;
bottom:0px;
width:100%;
background-color: red;
overflow-x: hidden;
overflow-y: scroll;
}
.top
{
height:50px;
width:100%;
background-color: yellow;
position: fixed;
top: 0px;
}
.content
{
height: 1500px;
background: linear-gradient(green, blue);
}
Is there a way to achieve this layout without relying on JavaScript to monitor scrolling? Can it be done through pure CSS?