CODEWITHSUNDEEP
css
Pavel
Pavel

Reputation: 1288

CSS - how to style a footer

is there a way to style a footer, so when there is a content (more than the height of the browser) it will be at bottom of the page(hidden), but if there is not enough content it will stick at bottom edge of the browser?

Upvotes: 9

Views: 57845

Answers (3)

javascriptes
javascriptes

Reputation: 63

You can always use the calc function in CSS to make out the difference in between the footer and the body height.

footer {

 height: calc(100vh - 100px);

}

for example...

Upvotes: 0

jamesplease
jamesplease

Reputation: 12879

One solution I use requires a known height of your footer.

Fiddles:

A lot of content

A little content

Here's the HTML:

<main>
  hello
</main>
<footer>
  i am the footer
</footer>

And here's the CSS:

html, body {
    height: 100%;
}
main {
    min-height: 100%;
    margin-bottom: -100px;
    background: #ddd;
}
main:after {
    content: "";
    display: block;
    height: 100px;
}
footer {
    height: 100px;
    background: #eee;
}

The trick is to set the main part of your document to have a min-height of 100%. This element must contain everything else on your page. In my example, I used the main element for this.

Next, give this element a negative margin equal to the height of the footer. This moves it up just enough to leave room for the footer there at the bottom.

The last piece of the puzzle is the after element. This is required to fill the space of that negative margin. Otherwise, the content of the main will overflow into the footer.

Upvotes: 10

ummahusla
ummahusla

Reputation: 2063

I can only recommend to read this.
Show footer if at bottom of page or page is short else hide

or this
http://css-tricks.com/snippets/css/fixed-footer/

Upvotes: 1

Related Questions