Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS CSS Layout Basics Getting Started with CSS Layout Creating a Sticky Footer

Posted by Linus Karlsson
Linus Karlsson
7,402 Points

Only shows half of the footer, unless I scroll down

Hi All,

I only see half my footer at the bottom of the page when I refresh the browser (Chrome for macOS)

The footer is sticking nicely to the bottom, but the scrollbar appears as I can only see half of the foot without scrolling down to reveal the rest of it.

Any thoughts on what I can do to compensate this issue? I want the footer to always display fully, obviously.

Greg Kaleka
Greg Kaleka
39,021 Points
Greg Kaleka
Greg Kaleka
39,021 Points

Hey Linus,

Please include your code with questions like this (a workspace snapshot is probably the best way for this). It's impossible for others to debug code they can't see.

Linus Karlsson
Linus Karlsson
7,402 Points

Ok, thank you, Greg! It’s all new to me here.

How should I act regarding the footer in my code?

Greg Kaleka
Greg Kaleka
39,021 Points
Greg Kaleka
Greg Kaleka
39,021 Points

Welcome! No problem at all - I try to spread good forum practices when I can :blush:. You'll get better answers when you ask questions well.

Heh I actually hadn't looked at your code / page yet. I've added an answer below - let me know if it does what you were hoping.

3 Answers

Greg Kaleka
Greg Kaleka
39,021 Points
Greg Kaleka
Greg Kaleka
39,021 Points

Hi Linus,

If you want your footer stuck to the bottom, and always showing entirely, even if your screen is shorter than your page's height, you need to add this set of rules to your CSS:

.footer {
    position: fixed;  /* always stay where I put you on the screen */
    bottom: 0;  /* I'm putting you at the bottom with no space in between */
    width: 100%;  /* fill the width of your containing element (body) */
}

You can add those to your existing rules targeting the footer class div.

Make sense?

Cheers :beers:

-Greg

Linus Karlsson
Linus Karlsson
7,402 Points

Yes, this did the trick!

So am I to understand it that what you've basically done is to 'fix' the position to the "bottom hight" of 0 with this code?

Greg Kaleka
Greg Kaleka
39,021 Points
Greg Kaleka
Greg Kaleka
39,021 Points

Yeah, fixed means don't move around when I scroll the page. bottom: [value] means the bottom of the element should be [value] away from the bottom of the page.

Zack Lee
PLUS
Zack Lee
Courses Plus Student 17,662 Points
Zack Lee
Zack Lee
Courses Plus Student 17,662 Points

you can fix a footer to the bottom of the screen using position: fixed. if your content is longer than the available space though it will scroll behind the footer.

Linus Karlsson
Linus Karlsson
7,402 Points

Thank you so much, but this only positioned my footer to the top of the page, pushing the header and all the content to the side.

Greg Kaleka
Greg Kaleka
39,021 Points
Greg Kaleka
Greg Kaleka
39,021 Points

This is the right first step. Position fixed tells the browser you want to fix the position, but if you don't tell it where to fix it, by supplying left, top, right, or bottom values (any one or combination will do), it will default to the top left corner, which is what you're seeing, Linus.

See my answer above for the other steps.

Linus Karlsson
Linus Karlsson
7,402 Points
Linus Karlsson
Linus Karlsson
7,402 Points

I don't know how to attach a snapshot here in 'Communities', but this is a copy/paste of the code:

HTML first

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>inResonance | always in tune</title>
        <link rel="stylesheet" href="css/normalize.css">
        <link href="https://fonts.googleapis.com/css?family=Dosis|Roboto+Slab" rel="stylesheet">
        <link rel="stylesheet" href="css/main.css">
    </head>
    <body>
        <div class="wrap">
            <header class="main-header">
                <div class="container">
                    <a href="index.html" id="logo">
                        <h1>inResonance</h1>
                        <h2>always in tune</h2>
                    </a>
                    <nav>
                        <ul>
                            <li><a href="index.html">Latest</a></li>
                            <li><a href="suppliers.html">Suppliers</a></li>
                            <li><a href="us.html">Us</a></li>
                        </ul>
                    </nav>
                </div>
            </header>
            <div class="page-info">
                <div class="container">
                    <p>[latest updates will go here]</p>
                </div>
            </div>
        </div>
        <div class="footer">
            <footer>
                <a href="https://www.facebook.com/InResonanceAB/"><img src="img/facebook-logo.png" alt="Facebook Logo" class="social-icon"></a>
                <a href="https://www.linkedin.com/in/ronny-carlsson-7311906/"><img src="img/linkedin-logo.png" alt="LinkedIn Logo" class="social-icon"></a>
                <p>&copy; inResonance AB 2017</p>
            </footer>
        </div>
    </body>
</html>

... and then the CSS

/***********************************************************
GENERAL
************************************************************/


* {
    box-sizing: border-box;
}

body {
    font-family: 'Roboto Slab', serif;
}

.container {
    padding-left: 1em;
    padding-right: 1em;
}

a {
    text-decoration: none;
}



/***********************************************************
HEADING
************************************************************/

.main-header {
    padding: 5px 0 0 0;
}

#logo {
    text-align: center;
    margin: 0;
}

h1 {
    font-family: 'Dosis', sans-serif;
    margin: 15px 0;
    font-size: 1.75em;
    font-weight: normal;
    line-height: 0.8em;
}

h2 {
    font-family: 'Roboto Slab', serif;
    font-size: 0.75em;
    margin: -5px 0;
    font-weight: normal;
}



/***********************************************************
NAVIGATION
************************************************************/

nav {
    text-align: center;
    padding: 10px 0;
    margin: 20px 0 0;
}

nav ul {
    list-style: none;
    margin: 0 10px;
    padding: 0;
}

nav li {
    display: inline-block;
}

nav a {
    font-weight: 800;
    padding: 15px 10px;
}



/***********************************************************
SPECIFIC PAGE INFO
************************************************************/

.page-info {
    background-image: url('../img/smith-chart.svg');
    background-size: 100%;
    background-repeat: no-repeat;
    background-position: center;
}



/***********************************************************
FOOTER
************************************************************/

.footer {
    font-size: 0.75em;
    text-align: center;
    color: #ccc;
}

.social-icon {
    width: 30px;
    height: 30px;
    margin: 0 2px;
}



/***********************************************************
COLORS
************************************************************/

/* site body */
body {
    background-color: #fff;
    color: #999;
}

/* orange header */
header {
    background: #FF9442;
}

/* logo text */
h1, h2 {
    color: #fff;
}

/* links */
a {
    color: #FF9442;
}

/* nav link */
nav a, nav a:visited {
    color: #fff;
}

/* hover nav link */
nav a:hover {
    color: #E8883F;
}



/***********************************************************
MEDIA QUERIES
************************************************************/

@media (min-width: 769px) {

    .wrap {
        min-height: calc(100vh - 57px);
    }

    .container {
        width: 100%;
        max-width: 1000px;
        margin: 0 auto;
    }

    .page-info {
        width: 70%;
        max-width: 1000px;
        margin: 0 auto;
    }
}
Greg Kaleka
Greg Kaleka
39,021 Points
Greg Kaleka
Greg Kaleka
39,021 Points

You can save a workspace snapshot by clicking on the camera icon near the top right corner of the workspace. Then just copy/paste the link here to share.

For copy/pasting code, please surround your code blocks with back tics (usually the same key as the ~ symbol) like this:

```html

[html code here]

```

```css

[css code here]

```

This helps with formatting and adds language-specific syntax highlighting. You can do this for any language.

Here's some css without doing that:

h1 { font-family: 'Dosis', sans-serif; margin: 15px 0; font-size: 1.75em; font-weight: normal; line-height: 0.8em; }

And here's the exact same copy/pasted css but with the back tics:

h1 {
    font-family: 'Dosis', sans-serif;
    margin: 15px 0;
    font-size: 1.75em;
    font-weight: normal;
    line-height: 0.8em;
}

I took the liberty of editing your post (only moderators can edit other people's posts).

Also, while we're on the topic of the forum, be mindful of where you're adding a comment. You pasted your code as an answer to your own question, which is probably not what you meant to do. You can also edit comments, answers, and questions by clicking the ... button just below it.