CODEWITHSUNDEEP
csstwitter-bootstrapsaas
sandeep chougule
sandeep chougule

Reputation: 147

Bootstrap container being overlapped by div which is bottom fixed

Bootstrap container above is being overshadowed by the div below, below div is supposed to be fixed at bottom. Below div is supposed to hold few button which should never overlap the above container which has dynamic forms.

I have formed a jsfiddle with similar problem.

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

<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">
  bottom stuff
</div>

Upvotes: 0

Views: 208

Answers (1)

Virendra Yaduvanshi
Virendra Yaduvanshi

Reputation: 272

Just remove the margin from the bottom div and the problem will be fixed.

<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; margin:0;">
  bottom stuff
</div>

Upvotes: 2

Related Questions