CODEWITHSUNDEEP
csstwitter-bootstrap
mbarish-me
mbarish-me

Reputation: 957

Bootstrap container being overshadowed by a div below

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

Need to get the container its vertical scrolling and never be shadowed the div below. What changes do I need to make. Container contains dynamic forms it can increase to infinite height and the below div should always never overshadow the container. The below div is always fixed to bottom. I am attaching the concerned jsfiddle link as well.

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>

Upvotes: 0

Views: 366

Answers (2)

Carl Binalla
Carl Binalla

Reputation: 5401

Add margin-bottom to the html element, so that the last element will be pushed upwards. This makes sure that the fixed element will not overlap the last element.

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


html {
  margin-bottom: 25px;
}

.container {
  background-color: red;
}

.panel.navbar-fixed-bottom {
  margin-bottom: 0;
  background-color: pink;
}
<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>

Upvotes: 1

RaJesh RiJo
RaJesh RiJo

Reputation: 4400

Add padding-bottom: 50px to your container. So that your content will not hide behind fixed footer. Check below snippet for reference.

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

Upvotes: 1

Related Questions