CODEWITHSUNDEEP
htmlcss
Fuze 360
Fuze 360

Reputation: 101

Fixed footer is covering content in page

I added a footer in which it is not reaching the bottom of the page and is covering content from my website, here is a picture of this problem. the footer covers text from underneath the two images. Is there any way for the footer to always remain at the bottom; not covering any extra content added in the future.

enter image description here

$(document).ready(function() {
      $(".menu-icon").on("click", function() {
            $("nav ul").toggleClass("showing");
      });
});

// Scrolling Effect

$(window).on("scroll", function() {
      if($(window).scrollTop()) {
            $('nav').addClass('black');
      }

      else {
            $('nav').removeClass('black');
      }
})
*{
    margin: 0;
    padding: 0;
}
html, body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
}
#content {
    min-height: 100%;
    position: relative;
    margin-bottom: 200px;

}
#main {

    padding-bottom: 100px;

}


body {
    font-family: "Helvetica Neue",sans-serif;
    font-weight: lighter;
}

#Header-1 {
    font-family: 'Lobster', cursive;
    font-size: 35px;
}




.content {
    width: 94%;
    margin: 4em auto;
    font-size: 20px;
    line-height: 30px;
    text-align: justify;
}

.logo {
    line-height: 60px;
    position: fixed;
    float: left;
    margin: 16px 46px;
    color: #fff;
    font-weight: bold;
    font-size: 20px;
    letter-spacing: 2px;
}

nav {
    position: fixed;
    width: 100%;
    line-height: 60px;
    z-index:2;
}

nav ul {
    line-height: 60px;
    list-style: none;
    background: rgba(0, 0, 0, 0);
    overflow: hidden;
    color: #fff;
    padding: 0;
    text-align: right;
    margin: 0;
    padding-right: 40px;
    transition: 1s;
}

nav.black ul {
    background: #000;
}

nav ul li {
    display: inline-block;
    padding: 16px 40px;;
}

nav ul li a {
    text-decoration: none;
    color: #fff;
    font-size: 16px;
}

.menu-icon {
    line-height: 60px;
    width: 100%;
    background: #000;
    text-align: right;
    box-sizing: border-box;
    padding: 15px 24px;
    cursor: pointer;
    color: #fff;
    display: none;
}

@media(max-width: 786px) {

    .logo {
        position: fixed;
        top: 0;
        margin-top: 16px;
}

    nav ul {
        max-height: 0px;
        background: #000;

    }

    nav.black ul {
        background: #000;
    }

    .showing {
        max-height: 34em;
    }

    nav ul li {
        box-sizing: border-box;
        width: 100%;
        padding: 24px;
        text-align: center;
    }

    .menu-icon {
        display: block;
    }

}

.container {

    margin: 0 auto;
    background: #f9f9f9;
    font-size: 24px;
    object-fit: cover;

}

.parallax {
    background: url('images/background-1.jpeg') no-repeat center;
    background-size: cover;
    background-attachment: fixed;
    height: 500px;
    min-height: 400px;
    z-index:-1;


}


p {
    font-family: 'Karla', sans-serif;
    margin: 2.5%;
    padding:0;
}
.b1{
    text-align: center;
}


.pic-1{
    height:280px; 
    width:420px;
    float: left;
    padding-left: 100px;
}


.pic-2{
    height:280px; 
    width:420px;
    float: right;
    padding-right: 100px;  

}

/*----------footer------------*/

#footer {
    width:100%;
    background-color:#222;
    padding: 60px 0px;
    position: relative;
    clear:both;
}
<!DOCTYPE html>
<html lang="en">
<head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <meta http-equiv="X-UA-Compatible" content="ie=edge">
      <title>Croydon Cycles</title>
      <link rel="stylesheet" href="style.css">
      <link rel="shortcut icon" type="image/png" href="images/favicon.png">
      <link href="https://fonts.googleapis.com/css?family=Karla" rel="stylesheet">
      <link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet">
      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
      <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
      <script src="parallax.min.js"></script>
</head>
<body>

    <div class="wrapper">
          <header>

                <nav>

                      <div class="menu-icon">
                            <i class="fa fa-bars fa-2x"></i>
                      </div>

                      <div class="logo">
                            Croydon Cycles 
                      </div>

                      <div class="menu">
                            <ul>
                                  <li><a href="index.html">Home</a></li>
                                  <li><a href="#">Location</a></li>
                                  <li><a href="shop.html">Shop</a></li>
                                  <li><a href="#">Contact</a></li>
                            </ul>
                      </div>
                </nav>

          </header>
    <div id="content">
          <div id="main">
                <div class="container">



                      <div class="parallax" data-parallax="scroll" data-z-index="-1">






                      </div>

                      <div class="content">
                            <p>The Croydon Cycles was founded in 2001 in order to promote and encourage 
                            all areas of cyclesports. The club has a rich history of racing both on the 
                            road and track. We also have an active social side and regular training trips away. 
                            Croydon Cycles is located in mostly around Thornton heath pond, 
                            however we still are active around all of Croydon.
                            </p>
                      </div>
                </div>

                <div class="profiles">

                      <p id="Header-1">Here are some of the members of Croydon Cycles:</p>

                      <div class="pic-1">
                      <img src="https://cdn.pixabay.com/photo/2017/08/09/10/08/saddle-2614038_960_720.jpg" alt="Proffesional biker"  height="280px" width="420px">
                      <p>The Croydon Cycles was founded in 2001 in order to promote and encourage 
                                  all areas of cyclesports. The club has a rich history of racing both on the 
                                  road and track. We also have an active social side and regular training trips away. 
                                  Croydon Cycles is located in mostly around Thornton heath pond, 
                                  however we still are active around all of Croydon.</p>
                      </div>



                      <div class="pic-2">
                      <img src="https://cdn.pixabay.com/photo/2013/10/03/23/19/bike-190483_960_720.jpg" alt="Proffesional biker"  height="280px" width="420px">
                      <p>The Croydon Cycles was founded in 2001 in order to promote and encourage 
                            all areas of cyclesports. The club has a rich history of racing both on the 
                            road and track. We also have an active social side and regular training trips away. 
                            Croydon Cycles is located in mostly around Thornton heath pond, 
                            however we still are active around all of Croydon.</p>
                      </div>
                </div>
          </div>
    </div>


    <footer id="footer">


    </footer>
  </div>
</body>
</html>

Upvotes: 2

Views: 265

Answers (1)

SuperDJ
SuperDJ

Reputation: 7661

Have a look at the example below. I've added comments to the changes made

$(document).ready(function() {
      $(".menu-icon").on("click", function() {
            $("nav ul").toggleClass("showing");
      });
});

// Scrolling Effect

$(window).on("scroll", function() {
      if($(window).scrollTop()) {
            $('nav').addClass('black');
      }

      else {
            $('nav').removeClass('black');
      }
})
*{
    margin: 0;
    padding: 0;
}
html, body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
}

/* Instead of a margin or bottom set nothing unless recuired. Better to use padding  */
#content {
    min-height: 100%;
    position: relative;

}
#main {

    padding-bottom: 100px;

}


body {
    font-family: "Helvetica Neue",sans-serif;
    font-weight: lighter;
}

#Header-1 {
    font-family: 'Lobster', cursive;
    font-size: 35px;
}




.content {
    width: 94%;
    margin: 4em auto;
    font-size: 20px;
    line-height: 30px;
    text-align: justify;
}

.logo {
    line-height: 60px;
    position: fixed;
    float: left;
    margin: 16px 46px;
    color: #fff;
    font-weight: bold;
    font-size: 20px;
    letter-spacing: 2px;
}

nav {
    position: fixed;
    width: 100%;
    line-height: 60px;
    z-index:2;
}

nav ul {
    line-height: 60px;
    list-style: none;
    background: rgba(0, 0, 0, 0);
    overflow: hidden;
    color: #fff;
    padding: 0;
    text-align: right;
    margin: 0;
    padding-right: 40px;
    transition: 1s;
}

nav.black ul {
    background: #000;
}

nav ul li {
    display: inline-block;
    padding: 16px 40px;;
}

nav ul li a {
    text-decoration: none;
    color: #fff;
    font-size: 16px;
}

.menu-icon {
    line-height: 60px;
    width: 100%;
    background: #000;
    text-align: right;
    box-sizing: border-box;
    padding: 15px 24px;
    cursor: pointer;
    color: #fff;
    display: none;
}

@media(max-width: 786px) {

    .logo {
        position: fixed;
        top: 0;
        margin-top: 16px;
}

    nav ul {
        max-height: 0px;
        background: #000;

    }

    nav.black ul {
        background: #000;
    }

    .showing {
        max-height: 34em;
    }

    nav ul li {
        box-sizing: border-box;
        width: 100%;
        padding: 24px;
        text-align: center;
    }

    .menu-icon {
        display: block;
    }

}

.container {

    margin: 0 auto;
    background: #f9f9f9;
    font-size: 24px;
    object-fit: cover;

}

.parallax {
    background: url('images/background-1.jpeg') no-repeat center;
    background-size: cover;
    background-attachment: fixed;
    height: 500px;
    min-height: 400px;
    z-index:-1;


}


p {
    font-family: 'Karla', sans-serif;
    margin: 2.5%;
    padding:0;
}
.b1{
    text-align: center;
}

/* Remove hard coded height  */
.pic-1{ 
    width:420px;
    float: left;
    padding-left: 100px;
}


.pic-2{
    width:420px;
    float: right;
    padding-right: 100px;  

}

/*----------footer------------*/
/* Set to position relative and bottom 0 */
#footer {
    width:100%;
    background-color:#222;
    padding: 60px 0px;
    position: relative; 
    bottom: 0;
    clear:both;
}
<!DOCTYPE html>
<html lang="en">
<head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <meta http-equiv="X-UA-Compatible" content="ie=edge">
      <title>Croydon Cycles</title>
      <link rel="stylesheet" href="style.css">
      <link rel="shortcut icon" type="image/png" href="images/favicon.png">
      <link href="https://fonts.googleapis.com/css?family=Karla" rel="stylesheet">
      <link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet">
      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
      <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
      <script src="parallax.min.js"></script>
</head>
<body>

    <div class="wrapper">
          <header>

                <nav>

                      <div class="menu-icon">
                            <i class="fa fa-bars fa-2x"></i>
                      </div>

                      <div class="logo">
                            Croydon Cycles 
                      </div>

                      <div class="menu">
                            <ul>
                                  <li><a href="index.html">Home</a></li>
                                  <li><a href="#">Location</a></li>
                                  <li><a href="shop.html">Shop</a></li>
                                  <li><a href="#">Contact</a></li>
                            </ul>
                      </div>
                </nav>

          </header>
    <div id="content">
          <div id="main">
                <div class="container">



                      <div class="parallax" data-parallax="scroll" data-z-index="-1">






                      </div>

                      <div class="content">
                            <p>The Croydon Cycles was founded in 2001 in order to promote and encourage 
                            all areas of cyclesports. The club has a rich history of racing both on the 
                            road and track. We also have an active social side and regular training trips away. 
                            Croydon Cycles is located in mostly around Thornton heath pond, 
                            however we still are active around all of Croydon.
                            </p>
                      </div>
                </div>

                <div class="profiles">

                      <p id="Header-1">Here are some of the members of Croydon Cycles:</p>

                      <div class="pic-1">
                      <img src="https://cdn.pixabay.com/photo/2017/08/09/10/08/saddle-2614038_960_720.jpg" alt="Proffesional biker"  height="280px" width="420px">
                      <p>The Croydon Cycles was founded in 2001 in order to promote and encourage 
                                  all areas of cyclesports. The club has a rich history of racing both on the 
                                  road and track. We also have an active social side and regular training trips away. 
                                  Croydon Cycles is located in mostly around Thornton heath pond, 
                                  however we still are active around all of Croydon.</p>
                      </div>



                      <div class="pic-2">
                      <img src="https://cdn.pixabay.com/photo/2013/10/03/23/19/bike-190483_960_720.jpg" alt="Proffesional biker"  height="280px" width="420px">
                      <p>The Croydon Cycles was founded in 2001 in order to promote and encourage 
                            all areas of cyclesports. The club has a rich history of racing both on the 
                            road and track. We also have an active social side and regular training trips away. 
                            Croydon Cycles is located in mostly around Thornton heath pond, 
                            however we still are active around all of Croydon.</p>
                      </div>
                </div>
          </div>
    </div>
     <footer id="footer">


    </footer>
  </div>


   
</body>
</html>

Upvotes: 2

Related Questions