How to place the sticky footer at the end of the page

Question

This code is not working in the INTERNET EXPLORER browser properly. The footer is not placed at the end. In all other browser's the code is working properly. Please help so that it also works in the IE browser.

HTML CODE <!DOCTYPE html> <html> <head> <title>Nabil Arkate | Designer</title> <meta charset="utf-8"> <meta name="viewport" content="width-device-width, initial-scale=1.0"> <link href='https://fonts.googleapis.com/css?family=Varela+Round' rel='stylesheet' type='text/css'> <link rel="stylesheet" type="text/css" href="css/normalize.css"> <link rel="stylesheet" type="text/css" href="css/style.css"> </head> <body> <div class="main-container"> <header class="main-header"> <a class="site-logo" href="index.html"> <h1>Nabil Arkate</h1> <h2>Designer</h2> </a>

        <ul class="nav">
            <li><a class="link-1" href="index.html">Home</a></li>
            <li><a class="link-1" href="family.html">Family</a></li>
            <li><a class="link-1" href="friendz.html">Friendz</a></li>
            <li><a class="link-1" href="nature.html">Nature</a></li>
            <li><a class="link-1" href="about.html">About</a></li>
            <li><a class="link-1" href="contact.html">Contact</a></li>
        </ul>
    </header>
</div>

<div class="row">       
    <div class="primary col">
        <h2>Welcome!</h2>
        <p>Everything in this city is worth waiting in line for!</p>
    </div><!--/.primary-->
</div>

<footer class="main-footer">
    <div class="footer-inner">
        <p>&copy; 2017 Nabil Arkate | Designer.</p>
    </div>
</footer>
</body>

</html>

CSS CODE /* ================================= Base Element Styles ==================================== */

body { font-family: 'Varela Round', 'Arial Rounded MT Bold', 'Arial', sans-serif; line-height: 1.5; color: #4c5156; display: flex; flex-direction: column; min-height: 100vh; }

h1, h2 { text-transform: uppercase; margin: 0; }

h1 { font-size: 1.70em; }

h2 { font-size: .85em; text-align: center; }

a { text-decoration: none; color: #c6cace; }

.main-container { background-color: #251c51; box-shadow: 2px 6px 15px rgba(0, 0, 0, 0.6); }

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

.site-logo { align-self: center; }

.nav { margin-top: 10px; padding: 15px; text-align: center; /box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.5);/ }

.nav li { margin-top: 10px; margin-bottom: 10px; text-transform: uppercase; }

.link-1 { transition: 0.3s ease; color: #676c70; font-size: .95em; text-decoration: none; padding: 8px 0; margin: 0 8px; }

.link-1:hover { border-top: 3px solid #c6cace; border-bottom: 3px solid #c6cace; padding: 3px 0; color: #c6cace; }

.row { flex: 1; }

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

@media (min-width: 769px) { .main-header { width: 90%; margin: 0 auto; }

h1 {
    font-size: 1.96em;
}

.nav {
    flex-direction: row;
    justify-content: space-between;
}

.nav li {
    margin: 0 .5em;
}

}

@media (min-width: 1025px) { .main-header { width: 85%; margin: 0 auto; }

h2 {
    text-align: left;
}

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

.nav {
    flex-direction: row;
    justify-content: space-between;
    align-self: center;
    margin-top: 0;
}

.nav li {
    margin: 0 0.5em;
}

}

Answer 1 · 2017-09-20T16:59:35Z

September 20, 2017 4:59pm

Don't use min-height on the body, use height instead. https://stackoverflow.com/a/37480088/6362803

Answer 2 · 2017-09-17T18:29:16Z

September 17, 2017 6:29pm

Hello.

If you want the <footer> to stick to the bottom of the page, maybe add this to your CSS code:

.main-footer { 
position: fixed; 
bottom: 0;
}

Welcome to the Treehouse Community

Looking to learn something new?

Nabil Arkate

Nabil Arkate

How to place the sticky footer at the end of the page

2 Answers

Joe VanLeeuwen

Joe VanLeeuwen

Kristiana Georgieva

Kristiana Georgieva