HTML / CSS：如何无限地向下推页脚？

时间：2018-04-28 23:11:29

标签： html css footer responsiveness

到目前为止，我已经设法让我的页脚始终坚持到底，但是，我一直在努力获取我的网页上的内容或图像来推动页脚。我一直在为页脚尝试绝对的，固定的，相对的位置，但无法在课堂内容中使用容器2＆＃34;继续在页脚下。它也不应该是类似于导航栏的粘性页脚，而是像内容按下内容的自然页脚一样。

HTML / CSS：https://jsfiddle.net/jof0hzhc/2/

HTML 

<!DOCTYPE html>
<html lang="en" class="app">
<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>ResponsiveNav</title>
      <link rel="stylesheet" href="css/style.css">
      <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 type="text/javascript" src="js/script.js"> </script>

</head>
<body class="bg2">
    <div class="wrapper">
            <header>

                  <nav>

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

                        <div class="logo">
                              ResponsiveNav
                        </div>

                        <div class="menu">
                              <ul>
                                    <li><a href="index.html">Home</a></li> <!--Classifying the button as "activepage" will allow the button to be red when the user is on the page.-->
                                    <li><a href="apps.html" class="activepage">Current page</a></li>
                                    <li><a href="about.html">About Us</a></li>
                                    <li><a href="contact.html">Contact</a></li>
                              </ul>
                        </div>
                  </nav>

            </header>

            <section class="content">
            <p class="apphead">Heading</p>
            <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>

                <div class="container2">
                <p class="apptext">Sub-heading</p>
                    <div class="games">

                        <img src="images/1.png">
                        <img src="images/2.jpg">
                        <img src="images/3.jpg">
                        <img src="images/4.jpg">
                        <img src="images/5.jpg">
                        <img src="images/6.jpg">
                    </div>

                <br><br><br><br><br><br><br><br>

                </div>


            </section>




      </div>


<footer>
<p class="foot">
        Footer text. <br>
        __________________________________________________________________________________________________ <br> <br>

        <a href="about.html" class="inquiry">About us </a> 

        |

        <a href="contact.html" class="inquiry">Contact us</a> <br>

        __________________________________________________________________________________________________ 
        <section>
            <p class="foot">Social Media</p>
                <span class="social">
                    <a href="" target="_blank"><img src="images/mail.png" alt="Mail" width="50px" height="50px"/></a>
                    <a href="http://www.facebook.com" target="_blank"><img src="images/facebook.png" alt="Facebook" width="50px" height="50px"/></a>
                    <a href="http://www.twitter.com" target="_blank"><img src="images/twitter.png" alt="Twitter" width="50px" height="50px"/></a>
                </span>
        </section>
        <section>
            <h3>All rights reserved<br></h3>
        </section>
</p>

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

CSS 

html, body {
      margin: 0;
      padding: 0;
      width: 98%;
      background-color: black;
      min-height: 100%;
}

body {
      font-family: "Helvetica Neue",sans-serif; /*Keep this font or hamburger disappears*/
      font-weight: lighter;
}

header {
      width: 98%;
      height: 13vh;

}

li>a{display:;}
li>a:hover, /*li hover makes the area around the list of text have a block of color around it when you hover over the text*/
li>a:focus{color:red;text-decoration:underline;} /*li focus is when you select the element, the element gets into a focus*/


footer { /*How do I even make the footer always stick at the very bottom no wonder the dimensions of the browser?*/
    width:100%;
    position:absolute;
    height:300px;
    font-size: 15px;
    margin-left:auto;
    margin-right:auto;
    text-align:center;
    background-color:black;
    border-width: 10px;
    color: white;


}


p {
    color: black;
    position: relative;
    margin: 5px;
    padding: 10px;
}

a { /*General styling for links to other pages or websites*/
    text-decoration:none;
    position:relative;
    font-family: Trebuchet MS, sans-serif;
}

h2 { /*Styling for site title*/
    font-size: 50px;
    text-align:left;
    color:white;
    margin: 20px;
    font-family: courier;
}

h3 {
    font-size:20px;
    padding-left:20px;
    color: white;
}




.content { /*the main container that consists of most of the existing content*/
    margin-top:5px;
    width:100%;
    height: 1400px;
    margin-left: auto;
    margin-right: auto;


}

.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: 1; /*Allows for the navigation bar to stack on top of content and not appear as it overlaps*/
}

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

nav.black ul {
      background: orange;
      opacity: 10;
}

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

nav ul li a {
      text-decoration: none;
      color: white;
      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: orange;
      display: none;
}

.activepage { 
    font-size: 25px;
    color: red;
    text-decoration: underline;
}

.welcome {
    font-family: courier;
}

.inquiry {
    font-size: 17px;
    color: white;
}


.container2 {
    background-color: darkgrey;
    padding: 10px;
    margin: 0;
    width: 97.8%;
    height: 1000px;
    z-index: 0;
    position:absolute;
    overflow:hidden;

}

p.heading {
    font-size: 25px;
    font-weight: bold;
    font-family: courier;
}

.foot {
    color: white;

}

.bg2 {
    background-image:url("hex.jpg");
    height: 550px;
    width: 102%;


}

.apphead {
    color: white;
    font-size: 100px;
    font-family: courier;
}

.apptext {
    color:white;
    font-size: 45px;
    font-weight: bold;
    font-family: courier;

}

.games {
    margin:0;
    position:relative;
    border:solid white; 
}

.games img {
    width: 640px;
    height:250px;
    padding: 5px;
    transition: 1s;

}

.games img:hover {
    transform: scale(1.1);
}

.item img{
    display:block;
}


@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;
      }

}

4 个答案:

答案 0 :(得分：2)

首先，我有点困惑为什么你如此使用<br>标签，但它几乎看起来像你试图用它们来区分元素。您可能希望使用填充或边距来执行此操作。

最后，我认为您要找的是position: fixed。试试这个：

footer { 
  width:100%;
  position: fixed; /* use fixed instead of absolute */
  bottom: 0; /* set bottom to 0 */
  height:300px;
  font-size: 15px;
  margin-left:auto;
  margin-right:auto;
  text-align:center;
  background-color:black;
  border-width: 10px;
  color: white;
}

答案 1 :(得分：1)

你的css有几个问题。您的内容无法显示的主要问题是您在overflow: hidden;和container2中使用height: 1000px;这导致超过1000px的所有内容都无法显示。尝试删除overflow: hidden或overflow: x-scroll。

这是溢出属性的文档，我建议您阅读它以更好地理解您的问题。 https://developer.mozilla.org/en-US/docs/Web/CSS/overflow

答案 2 :(得分：0)

有一些事情你应该改变1.你使用绝对位置在外面相对2.使用绝对值为高是不好的做法3.总是更好地使用填充和边距来制作空间等。保持固定位置仅用于标题导航并注释掉所有固定高度值（px）以及开始时的绝对和相对定位。如果没有特殊原因不这样做，绝对位置应该在内部相对位置。从页脚和容器2开始从主要问题开始。但要解决的问题还有很多。

答案 3 :(得分：0)

  1. 您需要为min-height
    2. 设置html, body {min-height: 100vh;}
  2. 将footer设为position: fixed; bottom: 0; left: 0;

    3. 希望这会对你有帮助。

相关问题
最新问题