网站页脚不会停留在页面的底部？

页面加载时，页脚不会显示在正确的位置。它似乎加载在浏览器的底部（我希望它通过浏览器的底部到页面底部，如果页面上有很多内容），但是当您滚动查看其余内容时，它会保持相同放置在覆盖内容的页面上（不停留在浏览器的底部）。我已经设置了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; 
    } 
}

图片在网站上使用：

来源

2017-07-03 Lewis Blundell

，那么你必须使用“的位置是：固定”。 –

这就是我想要避免的，我希望脚注被推到页面的底部而不是浏览器。如果有少量的内容，那么我希望它被推到视口的底部，但是如果有大量的内容我希望它在所有的内容之后。 –

参见[我的回答（https://stackoverflow.com/a/44797962/4254681）在这个岗位。那是你需要的吗？ – Duannx

尝试固定位置

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"); 
})

来源

2017-07-03 13:05:40

这就是我试图避免的，我想页脚推到页面底部而不是浏览器。如果有少量的内容，那么我希望它被推到视口的底部，但是如果有大量的内容我希望它在所有的内容之后。 –

因为我从你的评论让我更新了我的answer.you可以检查出来，如果它不是你的意思，请告诉我 –

仍然没有运气，如果页面的总高度比浏览器大我想页脚内容后的页面底部。这意味着它只有在您滚动到页面末尾时才会显示。 –

网站页脚不会停留在页面的底部？

回答

相关问题