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

Question

我试图让 div 始终位于底部页面。即使用户向下滚动，它也会出现在最后。这是CSS代码

#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;
}

以及 10 个 div 和中心面板的 ASP.NET 代码:

 <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 来做到这一点，而不是 javascript 或其他任何东西。我尝试使用

  bottom: 0px;
  bottom: 0%;

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

Answer 1

只需将 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>