CSS - Place The Footer On The Bottom Of The Page Even If Not Enough Content

With HTML / CSS, I need to get the footer be placed on the bottom of the page even if there is no enough content. In case there is a lot of content causing a scroll, is very easy t

Solution 1:

You can use a flexbox sticky footer layout if you'd like.

I would use min-height: 100vh; instead of height: 100%; though

html, body {
  min-height: 100vh;
}

body {
  display: flex;
  flex-direction: column;
  margin: 0;
}

.content {
  /* Include `0 auto` for best browser compatibility. */
  flex: 1 0 auto;
}

.header, .footer {
  background-color: grey;
  color: white;
}

<div class="header">
  <h2>Header</h2>
</div>

<div class="content">
  <h1>Content</h1>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta. Mauris massa. Vestibulum lacinia arcu eget nulla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur sodales ligula in libero. </p>
</div>

<div class="footer">
  <h4>Footer</h4>
</div>

Solution 2:

You can do this two ways. One is using flexbox, and setting the content area to flex-grow so it fills the available space by default.

body {
    margin: 0;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}
#header, #content, #footer {
	padding: 10px;
}
#header {
    height: 100px;
    background-color: #abcdef;
}
#content {
    flex: 1 0 0;
    background-color: #F63;
}
#footer {
    height: 100px;
    background-color: #abcdef;
}

<div id="header">
There is the Header
</div>
<div id="content">
	hello world<br/>
	hello world<br/>
	hello world<br/>
	hello world<br/>
	hello world<br/>
	hello world<br/>
	hello world<br/>
	hello world<br/>
	hello world<br/>
	hello world<br/>
	hello world<br/>
	hello world<br/>
	hello world<br/>
	hello world<br/>
	hello world<br/>
	hello world<br/>
	hello world<br/>
</div>
<div id="footer">
There is the Footer
</div>

Or you can absolutely position the footer, and use padding on body to reserve the space where the footer will be.

* {box-sizing:border-box;}
body {
    margin: 0;
    padding-bottom: 100px;
    position: relative;
}
#header, #content, #footer {
	padding: 10px;
}
#header {
    height: 100px;
    background-color: #abcdef;
}
#content {
    left: 0;
    right: 0;
    background-color: #F63;
}
#footer {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 100px;
    background-color: #abcdef;
}

<div id="header">
There is the Header
</div>
<div id="content">
	hello world<br/>
	hello world<br/>
	hello world<br/>
	hello world<br/>
	hello world<br/>
	hello world<br/>
	hello world<br/>
	hello world<br/>
	hello world<br/>
	hello world<br/>
	hello world<br/>
	hello world<br/>hello world<br/>
	hello world<br/>
	hello world<br/>
	hello world<br/>
	hello world<br/>
	hello world<br/>
	hello world<br/>
	hello world<br/>
	hello world<br/>
	hello world<br/>
	hello world<br/>
	hello world<br/>
	hello world<br/>
	hello world<br/>
	hello world<br/>
</div>
<div id="footer">
There is the Footer
</div>

Solution 3:

I had the same problem. This solved it.

#footer {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
}