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

将margin-bottom添加到html元素，以便最后一个元素向上推。这可以确保固定元素不会与最后一个元素重叠。

html{
  margin-bottom: 25px; //adjust accordingly
}

＆＃13;

＆＃13;

html {
  margin-bottom: 25px;
}

.container {
  background-color: red;
}

.panel.navbar-fixed-bottom {
  margin-bottom: 0;
  background-color: pink;
}

＆＃13;

<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> fffffffffffddd
    <br>
  </div>
</div>

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

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