[ANSWERED] html – Ensure that the footer is on bottom of the page if the page has a short height

Question 1

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/

Question 2

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>

Question 3

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>

Bollate

[ANSWERED] html – Ensure that the footer is on bottom of the page if the page has a short height

By

Solution 1 :

Solution 2 :

Problem :

Comments

Comment posted by CSS to make HTML page footer stay at bottom of the page with a minimum height, but not overlap the page

Comment posted by Basj

Comment posted by Basj

Comment posted by Sheets

By

Related Post

[ANSWERED] html – select all elements within a parent class

[ANSWERED] html – Hidden Div Text Reappears?

[ANSWERED] c# – InvalidCastException when reading mshtml.HTMLDocument.Script property

You missed

[ANSWERED] javascript – Text box to display updated text and save on button click

[ANSWERED] javascript – Pass html tag to angularjs variable from controller

[ANSWERED] html – bootstrap mobile menu not scrolling instead the background is scrolling

[ANSWERED] html – How to play live stream YouTube videos using CEF4Delphi?

Bollate