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

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
38,990 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.

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
38,990 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
38,990 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

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
38,990 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
PRO
Zack Lee
Pro Student 17,645 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.

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
38,990 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.

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
38,990 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.