个人中心
gpt4 book ai didi

html - 固定页脚覆盖页面内容

转载 作者：行者123 更新时间：2023-11-27 23:02:16 25 4
gpt4 key购买 nike

我添加了一个页脚，它没有到达页面底部，而是覆盖了我网站的内容，这是这个问题的图片。页脚覆盖了两个图像下方的文本。有没有办法让页脚始终保持在底部？不涵盖将来添加的任何额外内容。

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>

最佳答案

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

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

关于html - 固定页脚覆盖页面内容，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/52008466/

25 4 0
文章推荐： python - 我应该#include boost/Python.hpp 还是 boost/python.hpp？
文章推荐： html - 您如何引用说出报价的人显示在您的文档中？
文章推荐： javascript - 动态创建嵌套 JSON 对象父级和子级
文章推荐： javascript - 如何匹配 URL 但不在括号中
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com