CODEWITHSUNDEEP
htmlcss
Zeth
Zeth

Reputation: 2578

Footer in the bottom of the page - regardless of amount of content

I'm trying to make a website, where the footer-section is in the bottom of the browser, regardless of how much content is on the page.

If a page have a lot of content, then it looks normal, since a scrollbar will appear and the footer will be the last element of the page - no biggie. But if a page doesn't have enough content to fill out the browser, then the body-section wont fill the whole height of the browser, and then it challenges me to get the footer to be located in the very bottom of the browsers. So on pages with lesser content, then instead of it going:

logo
navigation
content
footer
[[ MASSIVE GAP ]]

then I want it to go:

logo
navigation
content
[[ MASSIVE GAP ]]
footer

I've tried to illustrate the challenge in this Fiddle: https://jsfiddle.net/zmhh3z00/ ... As you can see, then the html-section fills the whole page - but the body-section will only fill as much as the content will make of it. And I can't put a height: 100%; overflow: hidden; on the body-element, since that would make the scrollbar disappear on longer pages. I've tried putting a position: relative; on the html-section and then put a position: absolute; bottom: 0px; left: 0; width: 100% on the footer-section, but it's glitchy and works like poo. And the footer can't be position: fixed;, since it then would be visible from top to bottom.

Any suggestions?

Upvotes: 3

Views: 3162

Answers (5)

JSEvgeny
JSEvgeny

Reputation: 2750

Or utilizing flex features you can do it so: 

body {
  height: 100vh;
  display: flex;
  flex-direction: column
}

footer {
  margin-top: auto;
}
<html>
  <body>
    <main>Some content</main>
    <footer>I am footer</footer>
  </body>
</html>

Upvotes: 0

Zeth
Zeth

Reputation: 2578

A lot of great answers, but no one said anything about putting the min-height: 100vh; position: absolute; on the body-section, which was what solved it. It's important that it's not height: 100vh;, but that it's min-height: 100vh;. And thereafter I could simply set the footer-section to have position: absolute; left: 0; bottom: 0; width: 100%; .

Then I found the height of the footer and add that as padding to the body tag. For instance, if the footer was 247px heigh, then I added padding: 0 0 247px 0; and potentially margin: 0 0 25px 0; as well, to make a small gap in the bottom of the page.

... The whole idea was not having to wrap everything in a <div class="outer"> or a <div class="container">, which was what many of the solutions suggested.

Upvotes: 1

Gabriel machts
Gabriel machts

Reputation: 187

Basically, you have a containing div that has min-height:95 (or 100)vh. Then you position the footer absolutely at the bottom of this div.

html {background: green;}
body {background: red; border: 1px solid yellow}

.footer  {background: rgba(255,255,255,0.4); border: 1px dashed #000; position: absolute; bottom: 0px; width: 100%;}
.outer {min-height:95vh; position:relative;}
<div class="outer">
<div class="container">
<p>
Main content, where logo and content is.
</p>
</div>
<div class="footer">
<p>
Footer content
</p>
</div>
</div>

You can find the fiddle here: https://jsfiddle.net/xmkx99o3/

Upvotes: 0

Alvaro Silvino
Alvaro Silvino

Reputation: 9733

You can add this css:

.container{
  min-height:100vh
}

Or you can add a div like:

 <div class="gap-100"></div>

css:

.gap-100{
  height:100vh
}

Upvotes: 0

Henrique M.
Henrique M.

Reputation: 502

Set your content div to have min-height: 100vh; or min-height: 90vh;and it should do the trick.

This will cause your content div to have at least a full page height.

Upvotes: 3

Related Questions