加载页面后,页脚未出现在正确的位置。它似乎加载在浏览器的底部(如果页面上的内容过多,我希望它越过浏览器底部到达页面底部),但是当您滚动查看其余内容时,它会保持不变放置在覆盖内容的页面上(不要停留在浏览器底部)。我已经设置了position: absolute;bottom: 0;,但它们似乎没有按预期工作。

HTML:

<html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Projects</title>
    <link rel="stylesheet" href="Style/style.css">
  </head>
  <body>
    <header>
      <nav class="row">
        <a class="mobileNav"></a>
        <ul class="col offset-desktop-7 desktop-5 offset-tablet-6 tablet-6 mobile-12">
          <li class="col desktop-4 tablet-4"><a href="index.html">Home</a></li>
          <li class="col desktop-4 tablet-4"><a href="portfolio.html">Projects</a></li>
          <li class="col desktop-4 tablet-4"><a href="contact.html">Contact</a></li>
        </ul>
      </nav>
      <section class="col desktop-12 tablet-12 mobile-12">
        <h1>Lewis Blundell</h1>
        <h2>Junior Web Developer</h2>
        <h3>HTML5 | CSS3 | JavaScript | PHP | MYSQL</h3>
      </section>
    </header>
    <section class="wrapper">
      <h1 class="col desktop-12 tablet-12 mobile-12">Projects</h1>
      <article class="row">
        <aside class="col desktop-3">
          <img src="Images/placeHolder.png" alt="">
          <img src="Images/placeHolder.png" alt="">
          <img src="Images/placeHolder.png" alt="">
        </aside>
        <div class="col desktop-6">
          <p>hello</p>
        </div>
        <aside class="col desktop-3">
          <img src="Images/placeHolder.png" alt="">
          <img src="Images/placeHolder.png" alt="">
          <img src="Images/placeHolder.png" alt="">
        </aside>
      </article>
    </section>
    <footer class="row">
      <p class="col desktop-12 tablet-12 mobile-12"> Lewis Blundell &copy 2017</p>
    </footer>
  </body>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
  <script src="Script/script.js"></script>
</html>


SASS:

/* --- Variables --- */
$columnAmount : 12; /* This is used to set the amount of columns that will be used for a responsive grid layout */
$green : #3E9633; /* Main green background colour used throughout site */
$white : #FFFFFF;
$grey : #444444;


/* --- General Styling --- */
aside{
  img{
    width: 75%;
    margin-botom: 20px;
  }
}
html{
  height: 100%;
}
.wrapper{
  padding-left: 10px;
  padding-right: 10px;
  padding-bottom:40px;
}
body{
  padding-bottom:50px;
  position: relative;
  background-color: $grey;
  color: $white;
  text-align: center;
  margin: 0;
  h1{
    text-align: center;
    color: $white;
    font-size: 3rem;
    text-decoration: underline;
  }
}
header{
  color: $white;
  overflow: hidden;
  background-color: $green;
  nav{
    .mobileNav{
    display: block;
    width: 100%;
    height: 40px;
    background: url(../Images/burger.png) no-repeat 98% center;
    cursor:pointer;
    }
    overflow:hidden;
    ul{
      list-style-type: none;
      margin: 0;
      padding: 0;
      li{
        display: inline-block;
        padding: 14px 16px;
        text-align: center;
        font-size: 150%;
        &:hover{
          background-color: $grey;
        }
        a{
          color: $white;
          text-decoration: none;
        }
      }
    }
  }
  h1{
    font-size: 5rem;
    text-align: center;
    margin-bottom: 0px;
    text-decoration: none;
  }
  h2{
    font-size: 3rem;
    text-align: center;
    margin-top: 0px;
  }
  h3{
    font-size: 2rem;
    text-align: center;
  }
}
footer{
  display: inline-block;
  position: absolute;
  left:0;
  bottom: 0;
  width:100%;
  height: 50px;
  background-color: $green;
}
/* --- Media Queries and General Layout--- */

.row{
  clear:both;
  width:100%;
}

.col{
  display:block;
  float:left;
  box-sizing: border-box;
  max-height:auto;
 }

@media screen and (max-width:480px){ /* Styling for mobile viewports */
  @for $i from 1 through $columnAmount{
    .mobile-#{$i}{
      width: 100% / $columnAmount * $i;
    }
    .offset-mobile-#{$i}{
       margin-left: 100% / $columnAmount * $i;
    }
  }
  header{
    nav{
      ul{
        background-color: $grey;
        height: 0;
        li{
          float:none;
          text-align: left;
          width: 100%;
          margin: 0;
          a{
            padding: 10px;
            border-bottom: 1px solid $white;
            display: block;
            margin: 0;
          }
        }
      }
    }
  }
  header nav ul.open{
    height: auto;
  }
}

@media screen and (min-width:481px) and (max-width:800px){ /* Styling for tablet viewports */
  @for $i from 1 through $columnAmount{
    .tablet-#{$i}{
      width: 100% / $columnAmount * $i;
    }
    .offset-tablet-#{$i}{
      margin-left: 100% / $columnAmount * $i;
    }
  }
  header nav a.mobileNav{
    display:none;
  }
}

@media screen and (min-width:801px){ /* Styling for desktop viewports */
  @for $i from 1 through $columnAmount{
    .desktop-#{$i}{
      width: 100% / $columnAmount * $i;
    }
    .offset-desktop-#{$i}{
      margin-left: 100% / $columnAmount * $i;
    }
  }
  header nav a.mobileNav{
    display:none;
  }
}


网站使用的图片:

html - 网站上的页脚不停留在页面底部吗?-LMLPHP

html - 网站上的页脚不停留在页面底部吗?-LMLPHP

最佳答案

尝试固定位置

position:fixed;
bottom:0;


如果您想位于浏览器页面的底部,如果您的内容高度小于窗口浏览器,如果大于,则应位于内容的底部,您可以尝试此操作

body{
  position: relative;
}
footer{
  bottom:0;
}


并为此使用此javascript代码

$(document).resize(function() {
    var bh = $("body").height();
    browser_height = window.innerHeight;
    if(bh<browser_height)
      $("footer").css("position","fixed");
    else
      $("footer").css("position","absloute");
})

10-07 19:21
查看更多