Question

我添加了一个页脚，该页脚没有到达页面底部，并且覆盖了我网站的内容，这是此问题的图片。页脚覆盖了两个图像下方的文本。有什么方法可以使页脚始终停留在底部；不会涵盖将来添加的任何额外内容。

$(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>

Answer 1

请看下面的例子。我已经对所做的更改添加了评论

$(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>

固定页脚覆盖页面中的内容

1 个答案: