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


Tags: css,asp.net

Problem :

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?



Solution :

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>


    CSS Howto..

    How can I make list item spacing more acceptable in html/css email for all viewers?

    How to position the tip arrow of bootstrap popover next to a text field- CSS/Jquery

    How to get different height html divs to float up

    How get device resolution for loading sharp images but size fonts/divs properly with viewport width=device-width?

    How can I generate a random color with Stylus CSS?

    How to control layering in HTML/CSS without making links nonfunctioning?

    how can I position my img right?

    How to specify image size in webview css using dip?

    How to right align a div containing a form in another div?

    How to make Media Query work when IE loads?

    Style elements based on how many elements there are using just CSS?

    How to have elements with different background-colors yet the background-image shows everywhere (aka, a watermark)?

    HTML And CSS and Javascript: How to make a onclick even remove text in input text fields

    Android App with HTML/CSS/jQuery. [How] Can it be done?

    How to create a box with line and add icon on side [closed]

    Hiding and showing web element with CSS in dart?

    how to change :nth element background size

    How to show ellipsis for long cell values in kendo ui grid?

    How do I apply css animations to angular2 components before they are destroyed/removed?

    How to overlap a border in CSS in order to create tabs?

    How can I prevent a form-control from taking a new line in Bootstrap

    How Do you combine CSS code to an HTML code? I want to Combine them? [closed]

    How to remove or hide element using jquery or css

    How can i put this SVG ‘Sidebar Menu’ in the right side?

    How Do I Code a Popover in Rails 4.2.5 Using gem bootstrap-sass (Bootstrap 2)?

    How to add style/css to a simple jQuery accordion?

    CSS-how to text-indent a nested unordered list

    CSS - How to auto adjust DIV height according to next sibling height?

    Only partial image showing as my background image. How can I use CSS to get the full image as my background?

    how to apply two kind of css to one control, one for internet explorer, another for firefox and chrome