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!

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

Ceonn Bobst
Ceonn Bobst
1,294 Points
Posted by Ceonn Bobst
Ceonn Bobst
1,294 Points

My footer is not sticking

My footer is not sticking to the bottom of the page. I don't know what is wrong...

Here is my html: 

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Title</title>
  <link rel="stylesheet" href="main.css">
  <link rel="stylesheet" href="responsive.css">
  <link href='http://fonts.googleapis.com/css?family=Changa+One|Open+Sans:400italic,700italic,400,700,800' rel='stylesheet' type='text/css'>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
  <body>
    <header class="main-header">
      <h1 class="name"><a href="index.html">Projekt</a></h1>
      <nav class="main-nav">
        <ul>
          <li class="home"><a href="index.html">Hem</a></li>
          <li class="connect"><a href="connect.html">Anslut</a></li>
          <li class="forum"><a href="forum.html">Forum</a></li>
          <li class="about"><a href="about.html">Om oss</a></li>
        </ul>
      </nav>
</header>

<div class="container">
<div class="main">
  <div class="item1">
    <h3>Lorem ipsum</h3>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. <br>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  </div>
  <div class="item2">
    <h3>Ipsum</h3>
    <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  </div>
</div>

<footer class="main-footer">
        <a href="http://twitter.com/" target="_blank"><img src="img/twitter-wrap.png" alt="Twitter Logo" class="social-icon"></a>
        <a href="http://facebook.com" target="_blank"><img src="img/facebook-wrap.png" alt="Facebook Logo" class="social-icon"></a>
        <p>&copy; 2016</p>
      </footer>
    </div>
  </body>
</html>

And here is my css: 

     * {
     box-sizing: border-box;
     }

    html {
    margin: 0px;
    height: 100vh;
    width: 100%;
    }  

    body {
    font-family: 'Avenir Next', 'Open Sans', sans-serif;
    height: 100vh;
    display: flex;
    flex-direction: column;
    margin: 0px;
    }

    .container {
    display: flex;
    flex-direction: column;
    }

    .main{
    flex: 1;
    }

    .main-header,
    .main-nav {
    display: flex;
    }

    .main-header a{
    text-decoration: none;
    color: black;
    }

    .main-nav a {
    padding: 10px 15px;
    font-size: .95em;
    text-transform: uppercase;
    }

    .main-nav ul{
    list-style: none;
    }

    .main-nav a:hover{
    color: darkgray;
    }

    .name {
    font-size: 1.35em;
    margin: 0;
    align-items: flex-start;
    }

    .main-header {
    margin-bottom: 30px;
    padding-top: 0.35em;
    padding-bottom: 0.35em;
    width: 100%;
    background-color: #CDD0D1;
    }


    .main-footer {
     padding: 2em 0;
     margin-top: 30px;
     text-align: center;
     width: 100%;
     border-top: 2px solid darkgray;
     background: #E6E4E4;
    }
    .social-icon {
    width: 20px;
    height: 20px;
    margin: 0 5px;
    }

@media (min-width: 100px) {
    .main-header,
    .main-nav {
        display: flex;

    }

    .main-header {
        flex-direction: row;
    }

    .name {
        align-items: flex-start;
    }
    .main-nav {
        flex-direction: column;
        align-items: center;
        flex-wrap: wrap;
    }

    .main {
      flex: 1;
    }

}

@media (min-width: 769px) {
    .main-header,
    .main-nav,
  .main{
        display: flex;
    }

  .name{
    justify-content: flex-start;
  }

    .main-header {
    }
  .main-nav {
        flex-direction: row;
        justify-content: flex-end;
    }

  .main {
    flex: 1;
  }
}

@media (min-width: 1025px) {

.main-header {
        flex-direction: row;
        justify-content: space-between;
    align-content: center;
    }

.name{
  justify-content: flex-start;
  }

.main {
    flex: 1;
  }
}

3 Answers

Billy Bellchambers
Billy Bellchambers
21,689 Points
Billy Bellchambers
Billy Bellchambers
21,689 Points

Try something like this

.container {
  min-height: calc(100vh - 145px)
}

This sets the height of your main content div . container to the height the vertical height of the screen minus the height of your footer so it will stick to the bottom of the screen.

Even when the content doesn't fill the screen. But also lets the footer slide out of view when there is alot of content too.

Ceonn Bobst
Ceonn Bobst
1,294 Points
Ceonn Bobst
Ceonn Bobst
1,294 Points

Thanks Billy, that solved the issue. But now a new issue har occurred...

The issue now is that the main-header content "jumps" out of the header if you resize the screen. How Should I proceed regarding this issue? See code in updated post, furthest down.

Thank you in advance!

Ceonn Bobst
Ceonn Bobst
1,294 Points
Ceonn Bobst
Ceonn Bobst
1,294 Points

No need, I had just done some really useless and bad coding in some places... Thanks for the help!