網站頁腳不會停留在頁面的底部？

頁面加載時，頁腳不會顯示在正確的位置。它似乎加載在瀏覽器的底部（我希望它通過瀏覽器的底部到頁面底部，如果頁面上有很多內容），但是當您滾動查看其餘內容時，它會保持相同放置在覆蓋內容的頁面上（不停留在瀏覽器的底部）。我已經設置了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可以檢查出來，如果它不是你的意思，請告訴我 –

仍然沒有運氣，如果頁面的總高度比瀏覽器大我想頁腳內容後的頁面底部。這意味着它只有在您滾動到頁面末尾時纔會顯示。 –

網站頁腳不會停留在頁面的底部？

回答

相關問題