Ensure that the footer is on bottom of the page if the page has a short height

Question

I would like to have a footer:

at the bottom of the page, even if the main-container is very short in height, e.g. only 300px high. In this case a big vertical margin should be added.
Probably of something like height(viewport) - height(main-container) - height(header)
in the normal flow of the body, after <div id="main-container">, so I don't want to place it with position: fixed or position: absolute.
if the main-container is big (e.g. 1 page or more), then only a few margin should be added between main-container and footer (to the contrary of bullet point 1.)

How to do this?

#header { background-color: yellow; }
#main-container { background-color: red; }
#footer { background-color: green; }

<div id="header">Header</div>
<div id="main-container">
Hello<br>
World
</div>
<div id="footer">
Bye-bye. <-- this should be on bottom even if main-container has only 2 lines
</div>

Does this answer your question? [CSS to make HTML page footer stay at bottom of the page with a minimum height, but not overlap the page](https://stackoverflow.com/questions/643879/css-to-make-html-page-footer-stay-at-bottom-of-the-page-with-a-minimum-height-b) — Szántó Zoltán, Feb 12 '20 at 22:21

G-Cyrillus · Accepted Answer · 2020-02-12T22:26:48.577

2

actually , a very possible duplicate of Fill remaining vertical space with CSS using display:flex

You may take a look at flex and flex-grow.

body {
display:flex;
flex-flow:column;
min-height:100vh;
margin:0;
}
#main-container {
flex:1;
}
#footer {}


/* = */
#header { background-color: yellow; }
#main-container { background-color: red; }
#footer { background-color: green; }

<div id="header">Header</div>
<div id="main-container" contentEditable>
Hello<br>
World
</div>
<div id="footer">
Bye-bye.
</div>

usefull link : https://css-tricks.com/snippets/css/a-guide-to-flexbox/

edited Feb 12 '20 at 22:26

answered Feb 12 '20 at 22:22

G-Cyrillus

101,410
14
105
129

Perfect! I added `contentEditable` to see what happens if the main container grows in height. – Basj Feb 12 '20 at 22:25

score 1 · Answer 2 · edited Feb 12 '20 at 22:27

1

Here you go

#footer {  position: absolute; bottom: 0; width: 100%; height: 2rem; }
#main-container { padding-bottom: 2rem; }

<div id="main-container" contentEditable>
Hello<br>
World
</div>
<div id="footer">
Bye-bye.
</div>

edited Feb 12 '20 at 22:27

Basj

41,386
99
383
673

answered Feb 12 '20 at 22:25

Sheets

37
1
9

Thank you, but this doesn't work if main-container grows in height: try, you will see an overlap. – Basj Feb 12 '20 at 22:27
Ah I see, will test more the next time! – Sheets Feb 12 '20 at 22:28

Ensure that the footer is on bottom of the page if the page has a short height

2 Answers2