Make div appear on the bottom of the page in every browser

Question

I have a web page with known content in top and bottom parts of the page, and unknown middle section. The middle part can be as short as 100px or more than a 1000px in height.

To make a middle part min-height: 100%; is not an option.

I found a good answer to my problem:

        html{
            height:100%;
            width:100%;
        }
        body{
            min-height:100%;
            display:table;
        }
        .top{
            display:block;
        }
        .main{
            display:block;
        }
        .buttom{
            display:table-footer-group;
        }

<html>
 <body>
  <div class="top">
 Fixed top box
  </div>
  <div class="main">
 Box with unknown content
  </div>
  <div class="buttom">
 Fixed buttom box
  </div>
 </body>
</html>

But for some reason it doesn't work in mozila browser. Can anyone suggest something that works in every browser?

To clarify: All div supposed to be separate and in no case should one div appear on top another

Sooraj · Answer 1 · 2016-08-17T13:01:57.503

This will work for you. Use position:fixed and bottom:0. In this case independent of any other elements in the page , your bottom will always appear 0px from the bottom of the page.

.top {
  position: fixed;
  width: 100vw;
  height: 50px;
  top: 0;
  background: red
}
.main {
  /* style for main */
}
.bottom {
  height: 100px;
  width: 100vw;
  background: #444;
  position: fixed;
  bottom: 0;
  color: white;
}

<html>

<body>
  <div class="top">
    Fixed top box
  </div>
  <div class="main">
    Box with unknown content
  </div>
  <div class="bottom">
    Fixed buttom box
  </div>
</body>

</html>

In case you are not looking for fixed bottom you can implement the same using javascript.

jQuery(document).ready(function() {
  var windowHeight = $(window).height();
  var mainHeight = $(".main").height();
  var topHeight = $(".top").height();
  var bottomHeight = $(".bottom").height();
  if ((windowHeight - (topHeight + bottomHeight)) > mainHeight) {
    $(".bottom").css("position", "fixed");
  } else {
    $(".bottom").css("position", "initial");
  }
});

.top {
  position: fixed;
  width: 100vw;
  height: 50px;
  top: 0;
  background: red
}
.main {
  height: 10px;
}
.bottom {
  height: 100px;
  width: 100vw;
  background: #444;
  bottom: 0;
  color: white;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<body>
  <div class="top">
    Fixed top box
  </div>
  <div class="main">
    Box with unknown content
  </div>
  <div class="bottom">
    Fixed buttom box
  </div>
</body>

This doesn't work! if the middle part height more than a window height then fixed bottom div will be on middle part — levkaster, Aug 17 '16 at 12:43
Isn't that what you want. You have mentioned fixed bottom in the question. What exactly should the behaviour be ? — Sooraj, Aug 17 '16 at 12:51

score 1 · Accepted Answer · answered Aug 17 '16 at 12:39

Adding height:100%; increases height in mozilla.

        html{
            height:100%;
            width:100%;
        }
        body{
            min-height:100%;
            display:table;
              height:100%;
        }
        .top{
            display:block;
        }
        .main{
            display:block;
        }
        .buttom{
            display:table-footer-group;
              height: 20px;
        }

<html>
 <body>
  <div class="top">
 Fixed top box
  </div>
  <div class="main">
 Box with unknown content
  </div>
  <div class="buttom">
 Fixed buttom box
  </div>
 </body>
</html>

score 0 · Answer 3 · answered Aug 17 '16 at 12:42

You can position by absolute to bottom.

        html{
            height:100%;
            width:100%;
        }
        body{
            min-height:100vh;
            display:table;
        }
        .top{
            display:block;
        }
        .main{
            display:block;
        }
        .buttom{
            display:block;
            position:absolute;
            bottom:0;
        }

<html>
 <body>
  <div class="top">
 Fixed top box
  </div>
  <div class="main">
 Box with unknown content
  </div>
  <div class="buttom">
 Fixed buttom box
  </div>
 </body>
</html>

Make div appear on the bottom of the page in every browser

3 Answers3