How can I ensure that a div always stays at the bottom of the page, even when the user scrolls down? Here is the CSS code I have:
#CenterPanel {
position: absolute;
bottom: 0px;
left:0;
width: 100%;
height: 85%;
background-color: green;
}
.CenterPanels {
position: relative;
border: 2px solid #303641;
width: 28%;
height: 30%;
margin: 10px;
float: left;
border-radius: 10px;
}
And here is the ASP.NET code for 10 divs and the center panel:
<div id="CenterPanel">
<div class="CenterPanels">1</div>
<div class="CenterPanels">2</div>
<div class="CenterPanels">3</div>
<div class="CenterPanels">4</div>
<div class="CenterPanels">5</div>
<div class="CenterPanels">6</div>
<div class="CenterPanels">7</div>
<div class="CenterPanels">8</div>
<div class="CenterPanels">9</div>
<div class="CenterPanels">10</div>
</div>
The desired appearance should be like this: https://i.sstatic.net/lel3P.png
But instead, while scrolling, it looks like this: https://i.sstatic.net/bGohX.png
The green section should stay at the bottom, but it's not working as intended.
I want to achieve this using only CSS, without relying on JavaScript or other methods. I have tried using `bottom: 0px;` and `bottom: 0%;` but no luck. Any suggestions?