Footer Bottom

Question

I have a simple layout where I have two divs inside the parent div. [Cm. this.] What I want to achieve is that the first child div should take all the space available in the container [with or without content], forcing the footer at the bottom of the parent Div. Provided that it must act promptly. So when the main container resizes, the first child div still occupies the available space, and the footer should remain below the parent Div.

What I have tried so far is to make position: absolute; bottom: 0; position: absolute; bottom: 0; footer and yes, the footer will stick to the bottom, but the first child div (.content) does not accept the remaining remaining spaces.

Is it possible?. Please help. Thanks.

HTML:

 <div class='main'> <div class='content'>My Canvas Container</div> <div class='footer'>Footer</div> </div> 

CSS

 .main { height: 500px; background: #000; } .content { padding: 5px 10px; background: #fff; border: red solid 1px; } .footer { padding: 5px 10px; text-align: center; background: #eee; } .content, .footer { display: block; } 

Answer 1

Not all answers have considered your request that the solution will respond (with which I assume you mean scalability). If this is normal for the footer height, the solution is easy:

 .main { height: 500px; position: relative; } .content { height: 90%; } .footer { bottom: 0; height: 10%; position: absolute; width: 100%; } 

If the footer needs to be fixed in height, the solution is still pretty simple, but no longer has excellent browser support:

 .main { height: 500px; position: relative; } .content { height: calc(100% - 50px); } .footer { bottom: 0; height: 50px; position: absolute; width: 100%; } 

Notes: Content-Box (the default element determination method) ADDS does things like fields to the sizes you specify. If you specify the dimensions in pixels, this is just a minor annoyance - you simply subtract the borders / fields / etc from your declared sizes. If you use interest to respond quickly ... it's out of the mess. You need to apply the Border-Box, in which SUBTRACTS will be displayed as fields with the dimensions you specified.

 * { box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; } 

Answer 2

Please check this script and code: http://jsfiddle.net/Luncqwn3/1/

CSS

  .main { height: 500px; background: #000; position:relative; } .content { padding: 5px 10px; background: #fff; border: red solid 1px; min-height:92%; } .footer { padding: 5px 10px; text-align: center; background: #eee; position:absolute; bottom:0; } .content, .footer { display: block; } 

I set position:absolute for the relative footer to the parent container and set min-height for the content container .

You can link to these articles: Maintaining the footer at the bottom of the page

Footer at the bottom of the page

Answer 3

Demo

I use the table fake method to do this using display: table , table-cell and table-row

The code:

 html, body { height: 100%; margin: 0; padding: 0; } .main { background: #000; display: table; width: 100%; height: 100%; } .content-wrap, .footer-wrap { display:table-row; } .content, .footer { display: table-cell; } .content { box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; padding: 5px 10px; background: #fff; border: red solid 1px; height: 100%; } .footer { padding: 5px 10px; text-align: center; background: #eee; } 

Answer 4

I updated the fiddle. check the answer and tell me what i expected right?

 .content { padding: 5px 10px; background: #fff; border: red solid 1px; min-height:200px; } 

Fiddle

give a minimum height for your container to react. You can limit it to maximum height. I have provided you with an answer to what I understood from your question. If this is not what you expected, explain more clearly.

Answer 5

How to add height to .content and force the footer exactly where you want by setting px for height?

As below:

 .content { height:450px; padding: 5px 10px; background: #fff; border: red solid 1px; 

Answer 6

Demo

You need to specify the position of the parent div, just add position: relative to the parent div and position: absolute; in the footer, bottom:0; and make it 100% wide add left:0; right: 0;

CSS

 body, html { height: 100%; margin:0; padding:0; } .main { height: 500px; background: #000; position: relative; /* add this */ } .content { padding: 5px 10px; background: #fff; border: red solid 1px; } .footer { padding: 5px 10px; text-align: center; background: #eee; position: absolute; /* add this */ bottom:0; /* add this */ left:0; /* add this */ right:0; /* add this */ } /* div is by default block element so you don't need this below */ /* .content, .footer { display: block; } */ 

Modified Demo

CSS

 body, html { height: 100%; margin:0; padding:0; } .main { height: 500px; background: #000; position: relative; /* add this */ } .content { padding: 5px 10px; background: #fff; border: red solid 1px; position: absolute; bottom:30px; /* height of footer + padding in footer */ top:0; left:0; right:0; } .footer { padding: 5px 10px; text-align: center; background: #eee; position: absolute; left:0; right:0; bottom:0; height: 20px; }