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 Kohane Kagami
Kohane Kagami
12,390 Points

min-height: calc(100vh - 89px); does not work.

min-height: calc(100vh - 89px); does not work on Chrome. Please tell me why. Here is my site. http://testsite4.gangstacat.com/

and here is my code.

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Hague Cat Cafe</title>
    <link rel="stylesheet" href="css/normalize.css">
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
    <div class="wrap">
        <header class="main-header">
            <div class="container clearfix">
                <h1 class="name"><a href="#">Hague Cat Cafe</a></h1>
                <ul class="main-nav">
                    <li><a href="#">Home</a></li>
                    <li><a href="#">Access</a></li>
                    <li><a href="#">Contact Us</a></li>
                </ul>
            </div>
        </header>
        <div class="banner">
            <img class="logo" src="img/gangstacat.jpg" alt="Gangstacat">
            <h1 class="headline">Meeeeow!</h1>
            <span claass="tagline">You can feed us around 1PM.</span>
        </div>

        <div class="container clearfix">
            <div class="primary col">
                <h2>Welcome!</h2>
                <p>If you visit Den Haag, stop by our cat cafe. There are more than 20 cats here waiting for you.</p>
                <p>More than 100 people visit our cafe everyday from all over the world. </p>
                <p>Our open hours are Monday to Thursday from 10AM to 6PM.</p>
                <p>You can also order foods and drinks here. We have sandwitches, pasta, cakes (banana, chocolate), ice creams, cookies, milk, coffee, juice, cocoa and tea. </p>
            </div>

            <div class="secondary col">
                <h2>Cat Goods for Sale</h2>
                <figure>
                    <img class="icon-location" src="img/shopping-cart.png" alt="Shopping-cart">
                    <img class="feat-img" src="img/kat.svg" alt="cats for sale">
                    <figcaption>
                        <h4><a href="#">20% off Sale</a></h4>

                    </figcaption>
                </figure>

            </div>
            <div class="tertiary col">
                <h2>How to get here</h2>
                <p><strong>The Address:</strong>Tobias Asserlaan 5, 2517 KC Den Haag, The Netherlands</p>
                <p><strong>Public Transport:</strong>   
                Bus 24:stop "Laan van Meerdervoort", 4 minutes walking
                Tram 15:stop "Vredespaleis" or "Ary van der Spuyweg", 9 minutes walking
                Tram 16:stop "Van Speijkstraat", 7 minutes walking
                Bus 24 departs from The Hague Central Station, Tram 1 from The Hague HS (Holland Spoor), and Tram 16 from both The Hague Central Station and The Hague HS (Holland Spoor). For up-to-date travel information in English, please consult http://9292.nl/en . </p> 
                        </div>
    </div>
        <footer class="main-footer">
            <div class="container">
            <span>&copy;2016 Den Haag Cat Cafe.</span>
            </div>
        </footer>

</body>
</html>

/* ================================= 
  Base Element Styles
==================================== */

body {
    line-height: 1.6;
    color: #3a3a3a;
    padding-top:68px;
}

a { 
    color:  #3acec2;
    text-decoration: none;
}

/* ================================= 
  Base Layout Styles
==================================== */

/* ---- Layout Containers ---- */
*{
    box-sizing: border-box;
}
.wrap{
    height:calc(100vh - 89px);
}
.main-header {
    background: #fff;
    padding-top:1em;
    margin-bottom:0px;


}

.main-footer {
    padding: 2em 0;
    background: #d9e4ea;
    margin-top:30px;

    z-index:1;

}
.wrapper{
    width:70%;
    margin:0 auto;
}
.container{
    padding-left:1em;
    padding-right:1em;
}
.logo{
    width:190px;
}
.banner,main-footer{
    text-align:center;
}
.banner{
    color:#fff;
    background:#3acec2;
    padding: 3.2em 0;
    margin-top:0px;
    margin-bottom: 60px;
} 
figure{
    position:relative;
    line-height:0;
    margin:0;


}
figcaption{
    font-size:.9em;
    line-height:1.5;
    color:#fff;
    padding: 1em;
    background: rgba(19,43,102,.45);
    position:absolute;
    width:100%;
    bottom:0;
}
figcaption a{
    color:#fff;
}
figcaption a:hover{
    color:cyan;
}
.img{
    max-width:100%;
}

.icon-location{
    width:35px;
    position:absolute;
    bottom:-15px;
    right:-15px;
    z-index:2;
}
@media(min-width:769px){

    .main-header{
        position:fixed;
        background:#fff;
        box-shadow:0 1px 4px rgba(0,0,0,.4);
        width:100%;
        top:0;
        z-index:1;
    }
    .container{

        width:90%;
        max-width:1000px;
        margin:0 auto;
    }
    .name, .main-nav li{


        background: #fff;
        margin-top: 6px;
        margin-bottom: 20px;

    }
    .main-nav{
        text-align:center;
        float:right;
        margin-top:5px;

    }
    .name{
        text-align:left;
    }
    .main-nav li{
        float:left;
        margin-left:12px;
        display:inline-block;   }
    .name{
        float:left;
        width:240px;
        margin: 0px 0;
        font-size:1.25em;

    }
    .tagline{
        font-size:1.4em;
    }
    .col{
    display:inline-block;
    width:50%;
    margin-right: -4px;
    vertical-align:top;
    padding-left:1em;
    padding-right:1em;
    float:left; 
    }
}
.clearfix::after{
    content:"";
    display:table;
    clear:both;
}
.primary{
    width:50%;
}
.secondary{
    width:50%;
}
@media(min-width:1025px){
    .container{
        width:80%;
        max-width:1150px;
    }
    .primary,.tertiary{
        width:30%;
    }
    .secondary{
        width:40%;
    }
}
/* ---- Page Elements ---- */
Julien riera
Julien riera
14,665 Points
Julien riera
Julien riera
14,665 Points

Hi Kohane,

You should comment your div as it seems you miss one at the end :

 </div>
        <footer class="main-footer">

That /div seems to close your .container-clearfix tag, not the .wrap. If my eyes worked properly on this. When you create your wrap tag, you may wanna add a comment on the closing tag so that it remains less confusing.

eg.

<div class='wrap'>

    <header>
    </header>

    <footer>
    </footer>

</div> <!-- ENDS WRAP -->

If you do it while creating the tag, you won't lose it again. :)

9 Answers

Julien riera
Julien riera
14,665 Points
Julien riera
Julien riera
14,665 Points

Try this :

.wrap{
    min-height:calc(100vh - 89px);
}
Tim Washum
Tim Washum
14,215 Points

Not sure if it was just the spacing between my code but i just replaced mine with this and it fixed the issue for me. Thanks so much!

balthazear
balthazear
5,824 Points

Thanks, it fix my issue.

Daniel Campbell
Daniel Campbell
10,148 Points
Daniel Campbell
Daniel Campbell
10,148 Points

Be sure to put spaces around the '-' sign in the calculation.

min-height: calc(100vh - 89px);
osman musse
osman musse
90 Points
osman musse
osman musse
90 Points

hey guys its because the teacher added p:{ margin:0; }

Note!!! The paragraph element has a default margin of 16px or somethink so elimanate the margin Thats all it :D

Kohane Kagami
Kohane Kagami
12,390 Points
Kohane Kagami
Kohane Kagami
12,390 Points

Thank you for your comment. I added </div> and my site looks more weird now. http://testsite4.gangstacat.com/ Please help me.

Steven Parker
Steven Parker
231,248 Points
Steven Parker
Steven Parker
231,248 Points

Do you have a mock-up of what you want it to look like?

Kohane Kagami
Kohane Kagami
12,390 Points
Kohane Kagami
Kohane Kagami
12,390 Points

Thanks it looks better now but the footer is still not sticky. >.<

Julien riera
Julien riera
14,665 Points
Julien riera
Julien riera
14,665 Points

Weird, your website is ok on my screen, using Google Chrome.

Is it sticky depending on what your screen's side is set, or does it never stick ?

I noticed you don't take in account your top padding (on your body) in you MQ to modify your wrap.

@media(min-width:769px){
    body{
        padding-top:68px;
    }

Maybe this might help, even if it doesn't change anything on my computer :

@media(min-width:769px){
    body{
        padding-top:68px;
    }
        .wrap{
                min-height:calc(100vh - 14px);
    }

Tell what it does. If it remains in this state, maybe make 1 screenshot, upload it, and give us a link to see what it looks like... By now, I'm a bit stuck as - once again - your website looks fine to me.

Cheers !

Kohane Kagami
Kohane Kagami
12,390 Points
Kohane Kagami
Kohane Kagami
12,390 Points

Thanks. I created a video of adding the code and deleting the code. Please take a look. https://youtu.be/ZfvHgcOz9f8

Julien riera
Julien riera
14,665 Points
Julien riera
Julien riera
14,665 Points

I actually saw a difference when resizing the windows between with and without this snippet. Is what we see what you expect from your website, or not at all. As Steven said earlier, we can have a bad idea of what you do want since we haven't seen any static visual such as wireframe/mockup.

Feel free to test your modifications through the browser console. (crtl + shift + "J" for windows) You have all of your files in the "Sources" tab. You can make quick changes through the "Element" section too, though.

Paula Mourad
Paula Mourad
5,154 Points
Paula Mourad
Paula Mourad
5,154 Points

I had the same problem, and I figured it out. Don't use any spaces in your declaration. Worked for me!

Navneet Singh
Navneet Singh
2,424 Points
Navneet Singh
Navneet Singh
2,424 Points

How to get rid of scroll bar.?

<!DOCTYPE html>
<html lang="en">

<head>
  <link rel="stylesheet" href="css/normalize.css">
  <link rel="stylesheet" href="css/stylesheet.css">
<title>Best City Guide</title>
</head>


<body>

  <header class="main-header">
    <div class="container">
    <h1 class="name"><a href="#"> Best City Guide </a> </h1>
    <ul class="navigation">
      <li> <a href ="#"> Ice Cream </a> </li>
      <li> <a href ="#"> Donut </a> </li>
      <li> <a href ="#"> Tea </a> </li>
      <li> <a href ="#"> Coffee </a> </li>
    </ul>
  </div>
  </header>
 <div class="wrapper">
  <main>
    <h2> Welcome!</h2>
    <p>Lorem ipsum dolor sit amet, cum eius ancillae eleifend ut, mel eu ullum aeque,
      dicam deserunt forensibus mel eu. Vim dolorum omnesque posidonium et.
      His omnis nostrum ad, eu qui modus maluisset. Et accusamus consequat nec,
      eu eam eius legere nusquam, aliquam sensibus has et. Vix ea vocent dissentias,
      tota option torquatos te usu, per nemore minimum ei. Vix te alia vide ignota.
    </p>
  </main>

<section>
  <h2> The Food </h2>
  <p>Summus dolor plures dies manere non potest? Sed ad haec, nisi molestum est,
     habeo quae velim. Sed tamen enitar et, si minus multa mihi occurrent,
     non fugiam ista popularia. Quia nec honesto quic quam honestius nec turpi
     turpius.
  </p>
</section>
</div>

  <footer>
    <span> &copy;2020 For more information, Please visit again.</span>
  </footer>

</body>

</html>

body{
  color:#3a3a3a;
}

.container{
  width:70%;
  margin:auto;
}

.wrapper{
  width:70%;
  margin:auto;
  min-height:calc(100vh - 82px);
}

.main-header{
  background-color:#3acec2;
  padding:40px 0;
}

h1{
  margin:0;
  padding:0;
}


footer{
  background-color:#d9e4ea;
  padding:2em 0;
  text-align:center;
}