css - Bootstrap 容器被下面的 div 遮盖了

Question

https://jsfiddle.net/alowsarwar/0pz3j8f2

需要让容器垂直滚动并且永远不会遮挡下面的 div。我需要做哪些改变。容器包含动态表单，它可以增加到无限高度，下面的 div 永远不会遮挡容器。下面的 div 总是固定在底部。 我也附上了相关的 jsfiddle 链接。

CSS

container{
  background-color :red;
}

html

<container>
  <a class="btn btn-primary" href="#">
    Button
  </a>
  fffffffffff
  <br>
  fffffffff
  <br>
  ffffffffff
  <br>
    fffffffffff
  <br>
  fffffffff
  <br>
  ffffffffff
  <br>
    fffffffffff
  <br>
  fffffffff
  <br>
  ffffffffff
  <br>
    fffffffffff
  <br>
  fffffffff
  <br>
  ffffffffff
  <br>  fffffffffff
  <br>
  fffffffff
  <br>
  ffffffffff
  <br>
    fffffffffff
  <br>
  fffffffff
  <br>
  ffffffffff
  <br>
    fffffffffff
  <br>
  fffffffff
  <br>
  ffffffffff
  <br>
    fffffffff
  <br>
  ffffffffff
  <br>
    fffffffffff
  <br>
  fffffffff
  <br>
  ffffffffff
  <br>
    fffffffffff
  <br>
  fffffffff
  <br>
  ffffffffff
  <br>

</container>

<div class="panel navbar-fixed-bottom"
         style="padding-bottom:0px; min-height:0px">
  bottomaaaaaaaa stuff
</div>

Answer 1

将 padding-bottom: 50px 添加到您的容器中。这样您的内容就不会隐藏在固定页脚后面。检查以下代码段以供引用。

.container {
  background-color: red;
  padding-bottom: 50px;
}

.panel {
  margin-bottom: 0 !important;
  border-radius: 0 !important;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
  <div class="row">
    <a class="btn btn-primary" href="#">
    Button
  </a> fffffffffff
    <br> fffffffff
    <br> ffffffffff
    <br> fffffffffff
    <br> fffffffff
    <br> ffffffffff
    <br> fffffffffff
    <br> fffffffff
    <br> ffffffffff
    <br> fffffffffff
    <br> fffffffff
    <br> ffffffffff
    <br> fffffffffff
    <br> fffffffff
    <br> ffffffffff
    <br> fffffffffff
    <br> fffffffff
    <br> ffffffffff
    <br> fffffffffff
    <br> fffffffff
    <br> ffffffffff
    <br> fffffffff
    <br> ffffffffff
    <br> fffffffffff
    <br> fffffffff
    <br> ffffffffff
    <br> fffffffffff
    <br> fffffffff
    <br> ffffffffff
    <br>
  </div>
</div>

<div class="panel navbar-fixed-bottom" style="padding-bottom:0px; min-height:0px">
  bottomaaaaaaaa stuff
</div>