Question

我的页脚卡在网络中间并与所有内容重叠，但仅限于某一点。

我知道这可能正在发生，因为我没有正确使用“位置”，所以如果有人可以帮我修理它，那就太棒了！

谢谢！

Web：

    <!DOCTYPE html>
    <html lang="en">

    <head>
      <meta charset="utf-8" />
      <title>Puzz Hub</title>
      <link rel="stylesheet" href="./css/reset.css" />
      <link rel="stylesheet" href="./css/style.css" />
      <link href="https://fonts.googleapis.com/css?family=Podkova" rel="stylesheet">
    </head>

    <body>
      <header>
        <div id="logo">
          <a href="#">
            <img src="./images/logo.jpg" alt="logo"/>
          </a>
        </div>
        <nav>
          <ul>
            <li><a href="index.html">HOME</a></li>
            <li><a href="about.html">ABOUT US</a></li>
            <li><a href="fixtures.html">NEWS</a></li>
            <li><a href="aboutus.html">REVIEWS</a></li>
            <li><a href="fixtures.html">GAMES</a></li>
            <li><a href="aboutus.html">CONTACT</a></li>
          </ul>
        </nav>
      </header>

      <main>
        <div id="mainer">
            <p class="text_title">Meet Our Team </p>
        </div>
        <div id="about_container">
          <div class="banner">
            <div class="subtitle">Mike Wasowsky</div>
            <img src="https://avada.theme-fusion.com/wp-content/uploads/2012/08/team1.jpg" class="bannerimg" />
          </div>
          <div class="banner">
            <div class="subtitle">Mike Wasowsky</div>
            <img src="https://avada.theme-fusion.com/wp-content/uploads/2012/08/team1.jpg" class="bannerimg" />
          </div>
          <div class="banner">
            <div class="subtitle">Mike Wasowsky</div>
            <img src="https://avada.theme-fusion.com/wp-content/uploads/2012/08/team1.jpg" class="bannerimg" />
          </div>
          <div class="banner">
            <div class="subtitle">Mike Wasowsky</div>
            <img src="https://avada.theme-fusion.com/wp-content/uploads/2012/08/team1.jpg" class="bannerimg" />
          </div>
          <div class="soc_banner">
              <ul class="list-unstyled list-inline">
                <li><a href=""><img src="./images/icons/fb.png" class="social"/></a></li>
                <li><a href=""><img src="./images/icons/twit.png" class="social"/></a></li>
                <li><a href=""><img src="./images/icons/insta.png" class="social"/></a></li>
                <li><a href=""><img src="./images/icons/reddit.png" class="social"/></a></li>
              </ul>
          </div>
          <div class="soc_banner">
              <ul class="list-unstyled list-inline">
                <li><a href=""><img src="./images/icons/fb.png" class="social"/></a></li>
                <li><a href=""><img src="./images/icons/twit.png" class="social"/></a></li>
                <li><a href=""><img src="./images/icons/insta.png" class="social"/></a></li>
                <li><a href=""><img src="./images/icons/reddit.png" class="social"/></a></li>
              </ul>
          </div>
          <div class="soc_banner">
              <ul class="list-unstyled list-inline">
                <li><a href=""><img src="./images/icons/fb.png" class="social"/></a></li>
                <li><a href=""><img src="./images/icons/twit.png" class="social"/></a></li>
                <li><a href=""><img src="./images/icons/insta.png" class="social"/></a></li>
                <li><a href=""><img src="./images/icons/reddit.png" class="social"/></a></li>
              </ul>
          </div>
          <div class="soc_banner">
              <ul class="list-unstyled list-inline">
                <li><a href=""><img src="./images/icons/fb.png" class="social"/></a></li>
                <li><a href=""><img src="./images/icons/twit.png" class="social"/></a></li>
                <li><a href=""><img src="./images/icons/insta.png" class="social"/></a></li>
                <li><a href=""><img src="./images/icons/reddit.png" class="social"/></a></li>
              </ul>
          </div>
        </div>


      </main>

      <footer>
        <p>&copy; P3rzival, 2016</p>
      </footer>
    </body>

    </html>



    /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
    /* ~~~general tags~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */

    html {
      font-size: 16px;
    }

    body {
      font-family: Calibri, sans-serif;
      line-height: 1.5em;
      background-color: #ec7063;
      color: gray;
    }

    h1, h2 {
      color: purple;
    }

    h1 {
      font-size: 1.25em;
    }

    p {
       margin-bottom: 0.5em;
    }

    /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
    /* ~~~wrapper~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */

    #wrapper {
      background-color: white;
      padding: : 9% 15% 0 15%;
      text-align: justify;
    }

    /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
    /* ~~~header~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */

    header {
      /* background-color: #2471a3; */

    }

    header h1 {
      font-family: Papyrus, serif;
      font-size: 5em;    /* for font-size, em is relative to parent */
      line-height: 1.2em;  /* for other properties, em is relative to current */
                         /*   element's font size */
      padding: 10px 0 10px 0;
      color: purple;
    }

    #logo {}

    #logo img{
      position: fixed;
      margin: -7%;
      padding: 0 0 0 23%;
      width: 7%;
      height: auto !importan;
      z-index: 10;
    }

    /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
    /* ~~~navigation~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */

    nav {
      width: 100%;
      margin: -7% 0 0 0;
      padding: 0% 0% 0% 28%;
      font-size: 1.125em;
      line-height: 1.33em;
      font-family: 'Podkova', serif;
      background-color: #2e4053;
      position: fixed;
      z-index: 1;
    }

    nav ul {
      width: 80%;
      list-style: none;
    }

    nav ul li {
      padding: 15px 2% 15px 2%;
      display: inline-block;;
      /* background-color: #2471a3; */
      background-color: #2e4053;
    }

    nav ul li:hover {
      /* background-color: #5499c7; */
      background-color: #5d6d7e;
    }

    nav ul li:visited {
      /* background-color: #5499c7; */
      background-color: #5d6d7e;
    }

    nav a {
      text-decoration: none;
      outline: none;
      font-weight: bold;
    }

    nav a:link { color: white; }

    nav a:visited { color: white; }

    nav a:hover { color: white;}


    /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
    /* ~~~main content~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */

    main {}

    #wrapper {
        margin: 8% 15% 0 15%;
        text-align: justify;
        width: 70%;
        height: auto !importan;
      }

    #mainer {
      background-color: white;
      margin: 7% 15% 0 15%;
      padding: 2% 2% 2% 2%;
      text-align: justify;
      border-radius: 10px;
      width: 70%;
      height: auto !importan;
    }

    #title_bar {
      background-color: #922b21;
      color: white;
      margin: 1% 15% 0 15%;
      padding: 1% 2% 0.5% 2%;
      text-align: justify;
      border-radius: 10px;
      width: 70%;
      height: auto !importan;
    }

    #title_bar .title {
      font-size: 25px;
      line-height: 30px;
      letter-spacing: -1px;
      text-transform: none;
    }

    #mainer .title {
      font-size: 44px;
      line-height: 54px;
      letter-spacing: -1px;
      font-weight: 400;
      text-transform: none;
    }

    #container {
      margin: 1% 0 0 15%;
      width: 75%;
      height: auto !importan;
      position: fixed;
    }

    #container .banner {
      float: left;
      background-color: white;
      width: 19%;
      padding: 2% 2% 0.5% 2%;
      margin: 0% 2% 0% 0;
      text-align: justify;
      border-radius: 10px;
      height: auto !importan;
    }

    #container .subtitle {
      font-size: 20px;
      font-weight: bold;
      text-align: center;
      float: left;
      background-color: white;
      width: 100%;
      padding: 1% 1% 1% 0%;
      margin: 0 0 2% 0;
      border-bottom: 2px solid gray;
    }

    #container .banner img{
      width: 75%;
      display: block;
      margin: 0 auto 0 auto;
    }

    #about_container {
      margin: 1% 0 0 15%;
      width: 75%;
      clear: both;
    }

    #about_container .banner {
      float: left;
      background-color: #2e4053;
      width: 19%;
      padding: 2% 2% 2% 2%;
      margin: 0% 2% 0% 0;
      text-align: justify;
      border-radius: 10px;
      height: auto !importan;
    }

    #about_container .soc_banner {
      float: left;
      background-color: #2e4053;
      width: 19%;
      padding: 0.5% 2% 0.3% 2%;
      margin: 1% 2% 0% 0;
      text-align: justify;
      border-radius: 10px;
      height: auto !importan;
    }

    #about_container .subtitle {
      color: white;
      font-size: 20px;
      font-weight: bold;
      text-align: center;
      float: left;
      width: 100%;
      padding: 1% 1% 1% 0%;
      margin: 0 0 4% 0;

    }

    #about_container .bannerimg {
      width: 75%;
      display: block;
      margin: 0 auto 0 auto;
      border-radius: 10px;
    }

    .about {}

    .about img{
      width: 75%;
      display: block;
      margin: 0 auto 0 auto;
      border-radius: 10px;
    }

    #container .banner img:hover {
            -webkit-transform: rotateZ(-30deg);
            -ms-transform: rotateZ(-30deg);
            transform: rotateZ(-30deg);
    }

    main figure {
      /*overflow: hidden;*/
      width: 30%;
      float: right;
      margin: 0.5em 0 0.5em 4%;
      border: 1px solid gray;
    }

    main figcaption {
      text-align: center;
    }

    main figure img {
      max-width: 100%;
      /*max-width: auto;*/
      height: auto;
    }


    /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
    /* ~~~footer~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */

    footer {
      background-color: #5499c7;
      color: white;
      margin: 0% 15% 1% 15%;
      padding: 1% 2% 0.5% 2%;
      text-align: justify;
      border-radius: 10px;
      width: 70%;
      height: auto !importan;
    }

    .italic {
      font-style: italic;
    }


    /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
    /* ~~~media rules~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */

    @media screen and (max-width: 767px) {
      #wrapper {
        width: auto;
        border: none;
      }

      header h1 {
        font-size: 2em;
      }

    }
    /*~~~ Styling ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/

    .separator {
      border-color: #e0dede;
      height: 6px;
      border-bottom-width: 1px;
      border-top-width: 1px;
    }

    /*~~~ About Page ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/

    .text_title {
      font-family: PTSansRegular,Arial,Helvetica,sans-serif;
      font-size: 3em;
    }



    /* ~~~end~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/

    .list-unstyled {
      padding: 0 0 0 9%;
      list-style: none;
    }
    .list-inline li {
      display: inline-block;
      padding: 1% 2% 0 2%;
    }
    .list-inline li img {
      width: 40px;
    }

Answer 1

您需要将clear:both添加到页脚。

以下是演示：http://codepen.io/sol_b/pen/YpjGbN

另外，你有一个拼写错误：height: auto！importan;

我的页脚重叠了网页内容并卡住了

1 个答案: