Altjen B. Altjen B. - 1 month ago 6
ASP.NET (C#) Question

how to set a div to the bottom side in asp.net css

I am trying to make a div stay always on the bottom page.even when the user scroll down, it to appear in the end.
this is the css code

#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 asp.net code for 10 div's 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>


it should appear like this:
img1

but if you scroll down. I keep getting this:
img2

the green part should be in the bottom. but it doesnt.

I want to use just css to do this, not javascript or anything else.
I tried to use

bottom: 0px;
bottom: 0%;


but nothing is working. any suggestion?

Answer

Just add overflow:auto to your container div.

#CenterPanel {
  position: absolute;
  bottom: 0px;
  left: 0;
  width: 100%;
  height: 85%;
  background-color: green;
  overflow: auto;
}
.CenterPanels {
  position: relative;
  border: 2px solid #303641;
  width: 28%;
  height: 30%;
  margin: 10px;
  float: left;
  border-radius: 10px;
}
<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>