Gap between footer and viewport

Question

Hey,

I followed guils instructions to create a div that wraps the content and header, but still experience this problem. It looks like this

<!doctype html>

<html lang="en">
<head>
  <meta charset="utf-8">

  <title>Bike Adventure</title>
    <link href='https://fonts.googleapis.com/css?family=Varela+Round' rel='stylesheet' type='text/css'>
  <meta name="description" content="bike to Bad Ausse">
  <meta name="author" content="SitePoint">

  <link rel="stylesheet" href="css/normalize.css">
  <link rel="stylesheet" href="css/styles.css">

  <!--[if lt IE 9]>
  <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
  <![endif]-->
</head>

<body>
    <div class="wrapper ">
        <div class="footy">
        <header class="main-header">
                <div class="container">
                <h1 class="name"><a href="#">Biking to Bogdan</a></h1>
                <ul class="main-nav">
                    <li><a href="#">bicicleta buna</a></li>
                    <li><a href="#">antrenament</a></li>
                    <li><a href="#">provizii</a></li>
                </ul>
                </div> <!-- . container-->
        </header>

        <div class="container">
        <div class="primary col">
                <h2>Welcome!</h2>
                <p>Everything in this city is worth waiting in line for.</p>
                <p>Cupcake ipsum dolor sit. Amet chocolate cake gummies jelly beans candy bonbon brownie candy. Gingerbread powder muffin. Icing cotton candy. Croissant icing pie ice cream brownie I love cheesecake cookie. Pastry chocolate pastry jelly croissant.</p>
                <p>Cake sesame snaps sweet tart candy canes tiramisu I love oat cake chocolate bar. Jelly beans pastry brownie sugar plum pastry bear claw tiramisu tootsie roll. Tootsie roll wafer I love chocolate donuts.

    <div class="secondary col">         
            <h2>Bun venit!</h2>
            <p>Salut! Numele meu este Elena si vreau sa fac o calatorie uitmitoare initiatica de 900 de km prin Germania, din Hamburg si mai departe. Acesta este calatoria mea</p>
            <p>Pentru antrenament o sa fac mai intai cei 150 de km</p>
            <p>Apoi voi face cei 300 de km</p>
            <p>Ca mai apoi sa ma bag in stilul Goran la 900 de km. Uhuu, super tare si super fian. Se poate!</p>

        </div><!-- . container-->
    </div><!-- . footy-->
    </div><!-- . wrapper-->

 <!--End of wrap-->

    <footer class="main-footer">
        <span>&copy;2016 Calatorii Elena.</span>
    </footer>



</body>
</html>

/*  Base
=================================================*/
*,
*:before,
*:after{
    display: border-box;
}
body{
    color:black;
    font-family:'Varela Round', sans-serif;
    font-size:1.2em;
    line-height:1.8;
}

p{
    font-size:.95em;

}



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

/*  Navigation
=================================================*/
.name ,
.main-nav li{
    text-align:center;
    background:#fff;
    margin: .3em 0;
}
.main-nav a{
    font-size: .95em;
    color: #3acec2;
    text-transform: uppercase;
}

.main-nav a:hover {
    color: #093a58;
}

.main-nav a,
.name a{
    display:block;
    padding:.6em 0;
}
/*  Layout Containers
=================================================*/
.main-header{

    background:#3acec2;
    padding:1em 0;
    margin-bottom:30px;
}
.container{
    padding:0 1em;

}
.main-footer{
    text-align:center;
    background:#d9e4ea;
    padding:1em 0;
    margin-top:70px;

}




/*  Media Querries
=================================================*/
/*  fixed footer
=================================================*/
@media (min-width: 769px) {
    .wrapper{
        min-height:calc(100vh - 71.7083px );
    }

}

@Ran ShemTov: I want the footer to always stick to the bottom. The space between the footer and the viewport disappears when there is much content, but when there is little content that gap forms up. I dont want that to happen

Answer 1 · 2016-03-30T10:27:28Z

March 30, 2016 10:27am

you could place the footer in the container and add this css

.container {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.main-footer {
  align-self: flex-end;
}

Answer 2 · 2016-03-30T10:44:52Z

March 30, 2016 10:44am

Hello Elena,

I have fixed your issue! I have also changed your code so that it is easier to read. There are some major changes that could have been made especially to your HTML document. However you have the correct principles and have a lot of potential as a web developer!! Have a look at the changes I have made and please ask any questions you like :)

<!DOCTYPE html>
<html lang="en">
 <head>
  <title>Bike Adventure</title>
  <!--meta tags-->
  <meta charset="utf-8">
  <meta name="description" content="bike to Bad Ausse">
  <meta name="author" content="SitePoint">
  <!--fonts-->
  <link href='https://fonts.googleapis.com/css?family=Varela+Round' rel='stylesheet' type='text/css'>
  <!--stylesheets-->
  <link rel="stylesheet" href="css/normalize.css">
  <link rel="stylesheet" href="css/one.css">
 </head>
<body>
 <!--container-->
 <div id="container">
  <!--header/navigation-->
  <header>
   <nav>
    <ul>
     <h1><a href="#">Biking to Bogdan</a></h1>
     <li><a href="#">Bicicleta buna</a></li>
     <li><a href="#">Antrenament</a></li>
     <li><a href="#">Provizii</a></li>
    </ul>
   </nav>
  </header>
  <!--content-one-->
  <div id="content-1">
   <!--h2-->
   <h2>Welcome!</h2>
   <!--paragraph-->
   <p>Everything in this city is worth waiting in line for.</p>
   <!--paragraph-->
   <p>Cupcake ipsum dolor sit. Amet chocolate cake gummies jelly beans candy bonbon brownie candy. Gingerbread powder muffin. Icing cotton candy. Croissant icing pie ice cream brownie I love cheesecake cookie. Pastry chocolate pastry jelly croissant.</p>
   <!--paragraph-->
   <p>Cake sesame snaps sweet tart candy canes tiramisu I love oat cake chocolate bar. Jelly beans pastry brownie sugar plum pastry bear claw tiramisu tootsie roll. Tootsie roll wafer I love chocolate donuts.
  </div>
  <!--content-two-->
  <div id="content-2">
   <!--h2-->
   <h2>Bun venit!</h2>
   <!--paragraph-->
   <p>Salut! Numele meu este Elena si vreau sa fac o calatorie uitmitoare initiatica de 900 de km prin Germania, din Hamburg si mai departe. Acesta este calatoria mea</p>
   <!--paragraph-->
   <p>Pentru antrenament o sa fac mai intai cei 150 de km</p>
   <!--paragraph-->
   <p>Apoi voi face cei 300 de km</p>
   <!--paragraph-->
   <p>Ca mai apoi sa ma bag in stilul Goran la 900 de km. Uhuu, super tare si super fian. Se poate!</p>
  </div>
  <!--footer-->
  <div id="footer">
   <span>&copy;2016 Calatorii Elena.</span>
  </div>
 <!--end of container-->
 </div>
</body>
</html>

/***********************
Default
***********************/

*,
*:before,
*:after {
 display: border-box;
}

body {
 color: black;
 font-family: 'Varela Round', sans-serif;
 font-size: 1.2em;
 line-height: 1.8;
}

p {
 font-size: 1em;
}

h1 {
 margin: 0;
}

ul {
 margin: 0;
}

li {
 list-style-type: none;
}

/***********************
Header & Navigation
***********************/

header {
 background:#3acec2;
 position: relative;
 top: 0;
 left: 0;
 right: 0;
 padding: 20px;
 text-align: center;
}

nav h1 {
 background-color: #fff;
}

nav ul li {
 margin-top: 5px;
 background-color: #fff;
}

/***********************
Content-1
***********************/

#content-1 {
 padding: 0px 60px 0px 60px;
}

/***********************
Content-2
***********************/

#content-2 {
 padding: 0px 60px 0px 60px;
}

/***********************
Footer
***********************/

#footer {
 background:#d9e4ea;
 padding: 20px;
 position: absolute;
 left: 0;
 right: 0;
 bottom: 0;
 text-align: center;
}

Welcome to the Treehouse Community

Looking to learn something new?

Elena Paraschiv

Elena Paraschiv

Gap between footer and viewport

Ran ShemTov

Ran ShemTov

2 Answers

Tom Checkley

Tom Checkley

Alex Watts

Alex Watts