如何在asp.net css中将div设置为底部

Question

我试图让div始终在底页。即使用户向下滚动，它也会显示在最后。 这是css代码

 <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>

和10个div的asp.net代码和中心面板：

  bottom: 0px;
  bottom: 0%;

它应该如下所示：

但如果你向下滚动。我一直这样：

绿色部分应位于底部。但它没有。

我想用css来做这件事，而不是javascript或其他任何东西。 我试着用

{{1}}

但没有任何效果。有什么建议吗？

Answer 1

这是在你的页脚？如果是这样，尝试设置＆＃34; position：fixed;＆＃34;在页脚的CSS中

Answer 2

只需将overflow:auto添加到容器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>