Make footer take remianing bottom space using css

Question

I want my footer to take height same as the remaining bottom space. Currently I'm using following css for footer:

clear: both;
float: left;
background-color: #1F1102;
color: #E4F2FA;
min-height: 60px;
font-family: Verdana, Geneva, sans-serif;
font-size: 10px;
padding: 0;
padding-top: 10px;
text-align: left;
width: 100%;
min-width: 1000px;
margin: auto;

The result is:

enter image description here

Here as you can see the black has take only minimum height. I want it to take whole remaining space after it [that is marked with question marks]. Which changes do I have to make to get this?

note:- I don't want to give position:fixed to make it stick to bottom.

+1 @Rikudo Sennin This is a good solution to always stick the footer to the viewports bottom, but it does not change its height in respect to the browser window. — feeela, Aug 26 '11 at 09:16
[stackoverflow.com: html5-page-100-height-issue][1] [1]: http://stackoverflow.com/questions/11604363/html5-page-100-height-issue/13453135#13453135 — Nandhakumar, Nov 20 '12 at 06:32

score 20 · Answer 1 · edited Jun 20 '20 at 09:12

20

Well, the short answer is, You Can't!
The longer answer? You can fake it.

Why can't you?

Because a block level element is not able to strech and fill a space in height.

Fake it how?

Use the same background color as the footer for the container (or the same background image), that will cause it to appear like it's always fills up the entire space.

edited Jun 20 '20 at 09:12

Community

1
1

answered Aug 26 '11 at 09:25

Madara's Ghost

172,118
50
264
308

This is actually an elegant solution. I just had this problem, found this answer, and thought, what the hell, lets look at the CSS and see how hard this could be to implement. After refactoring, it simplified my CSS and solved the problem. Thanks @SecondRikudo! – Clint Pachl Oct 14 '14 at 05:26
this is the best solution and I've been looking and testing for half a day. 2 up votes! – luke_mclachlan Mar 04 '15 at 18:09
1

@luke_mclachlan This answer might be outdated now actually. Have a look at flexbox, it's probably possible with that. – Madara's Ghost Mar 04 '15 at 18:10
@Second_Rikudo yes I have looked into that, tried it and it didn't work. It probably would have if I had taken more time, but your solution took about 15 seconds ;-) – luke_mclachlan Mar 04 '15 at 19:39
This is now possible with flexbox using a method similar to what is described here https://philipwalton.github.io/solved-by-flexbox/demos/sticky-footer/. Do this, except put the "flex-grow: 1" in the footer element instead of the content element (in the article it's listed as "flex: 1"). – codemaker Sep 10 '17 at 03:03

score 6 · Answer 2 · answered Sep 10 '17 at 03:04

6

This is now possible with flexbox using a method similar to what is described here https://philipwalton.github.io/solved-by-flexbox/demos/sticky-footer/. Do this, except put the flex-grow: 1 in the footer element instead of the content element (in the article it's listed as flex: 1).

answered Sep 10 '17 at 03:04

codemaker

1,682
1
11
13

3

In the interests of protecting against link rot, you have your content like so: `
`, then set the body style to `display:flex; min-height: 100vh; flex-direction: column` and (in your case), the footer style to `flex: 1`. If you want to make the footer fix to the bottom of the screen, apply `flex: 1` to the `main` element instead – divillysausages May 08 '19 at 21:50

score 1 · Answer 3 · answered Aug 26 '11 at 09:14

You don't really can make a block-element span to the full height available in CSS. Best way is find use some workaround, which looks alike.

For example you may use a background-color (for the body/wrapper) or a centered background-image positioned to the bottom…

score 0 · Answer 4 · answered Mar 10 '16 at 08:33

This worked like a charm for me (originally from how-to-keep-footer-at-bottom-of-page-with-css):

Put this in your css:

html,
body {
    margin:0;
    padding:0;
    height:100%;
}
#wrapper {
    min-height:100%;
    position:relative;
}
#header {
    background:#ededed;
    padding:10px;
}
#content {
    padding-bottom:100px; /* Height of the footer element */
}
#footer {
    background:#ffab62;
    width:100%;
    height:100px;
    position:absolute;
    bottom:0;
    left:0;
}

Then in your index/master/_layout/whatever:

<body>

    <div id="wrapper">

        <div id="header">
        </div><!-- #header -->

        <div id="content">
        </div><!-- #content -->

        <div id="footer">
        </div><!-- #footer -->

    </div><!-- #wrapper -->

</body>

score -5 · Answer 5 · answered Dec 15 '13 at 22:40

-5

I had the same type of problem. What worked for me was to add a few pixels of padding to the footer and it ended up taking up the bottom of the page.

This is what did it for me:

footer{
    padding-bottom:10px;
}

answered Dec 15 '13 at 22:40

Asif

7
2

doesn't work, or maybe you misunderstood the question? – luke_mclachlan Mar 04 '15 at 18:03
@Asif in addition, your solution would add useless height to the page, which would make your page scrollable unless it's perfectly fitting the rest of the height, which I doubt it would in most circumstances – Ryan S Jul 27 '16 at 10:19

Make footer take remianing bottom space using css

5 Answers5

Why can't you?

Fake it how?

Linked