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: 10 auto;
}

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

<divclass="header"><h2>Header</h2></div><divclass="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><divclass="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: 100;
    background-color: #F63;
}
#footer {
    height: 100px;
    background-color: #abcdef;
}

<divid="header">
There is the Header
</div><divid="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><divid="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;
}

<divid="header">
There is the Header
</div><divid="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><divid="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;
}