levkaster levkaster - 3 months ago 7
CSS Question

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

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

Answer

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>

Comments