無法將頁腳粘到頁面末尾

我目前在學習CSS & HTML，並且有點麻煩。我的頁腳不想堅持底部;它漂浮在底部以下的空間之下（就像它底部有一個邊緣，儘管它沒有）。我嘗試了大部分我在網上找到的提示，但其中大部分或者不起作用，或者在窗口大小調整時使頭部變得很奇怪（有時它會放在中間等等）無法將頁腳粘到頁面末尾

這裏是HTML ：

<!DOCTYPE html> 
<html> 
<head> 
    <title>Pooblaščeni Prodajalci</title> 
    <meta charset="utf-8"> 
    <link rel="icon" type="image/png" href="photos/adidas.png"> 
    <link rel="stylesheet" type="text/css" href="css/trgovine.css"> 
    <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet"> 
</head> 
<body> 
    <header class="tm-header"> 
     <div class="tm-container"> 
      <a href="index.html"><img class="tm-logo"src="photos/adidas.png" width="80px" height="" alt="logo"></a> 
      <nav class="tm-nav"> 
       <ul> 
        <li class="hover_menu"><a href="index.html">Domov</a></li> 
        <li class="hover_menu"><a href="about.html">O nas</a></li> 
        <li class="current_page"><a href="#">Pooblaščeni Prodajalci</a></li> 
        <li class="hover_menu"><a href="index.html">Storitve</a></li> 
        <li class="hover_menu"><a href="index.html">Kontakt</a></li> 
       </ul> 
      </nav> 
     </div> 
    </header> 
    <div class="tm-container"> 
     <div class="tm-content"> 
      <section> 
       <article> 
        <h1 style="text-align: center; font-size: 50px;">Naši pooblaščeni prodajalci</h1> 
        <div> 
         <span class="trgovine"><a href="https://www.superge.si/" target="_blank"><img src="photos/superge_logo.png" alt="superge_logo" width="509px" height="200px"></a></span> 
         <span class="trgovine"><a href="https://www.hervis.si/store/" target="_blank"><img src="photos/Hervis_logo.png" alt="hervis_logo" width="509px" height="200px"></a></span> 
         <span class="trgovine"><a href="http://sl.sportsdirect.com/" target="_blank"><img src="photos/sports-direct-logo.png" alt="sportsdirect_logo" width="500px" height="200px"></a></span> 
        </div> 
        <div> 
         <span class="trgovine"><a href="https://www.intersport.si/shop/" target="_blank"><img src="photos/intersport_logo.png" alt="intersport_logo" width="509px" height="200px"></a></span> 
         <span class="trgovine"><a href="https://www.prva-liga.si/" target="_blank"><img src="photos/prva-liga-logo.jpg" alt="prvaliga_logo" width="509px" height="200px"></a></span> 
         <span class="trgovine"><a href="http://www.decathlon.si/" target="_blank"><img src="photos/decathlon_logo.png" alt="decathlon_logo" width="500px" height="200px"></a></span> 
        </div> 
        <div> 
         <span class="trgovine"><a href="https://www.tomassport2.si/" target="_blank"><img src="photos/tomassport-logo.png" alt="tomassport_logo" width="509px" height="200px"></a></span> 
        </div> 
       </article> 
      </section> 
     </div> 
    </div> 
    <div class="tm-footer"> 
     <footer> 
      &copy; copyright Adidas 2017 
     </footer> 
    </div> 
</body> 
</html>

這裏是CSS：

* { 
    margin: 0; 
    padding: 0; 
    font-family: 'Roboto', sans-serif; 
} 
body { 
    background-image: url('../photos/background.jpg'); 
    background-repeat: no-repeat; 
    background-attachment: fixed; 
} 
.tm-container{ 
    max-width: 1600px; 
    margin: 0 auto; 
} 
.tm-container{ 
    max-width: 1600px; 
    margin: 0 auto; 
} 
.tm-header{ 
    background: #fff; 
    height: 64px; 
} 
.tm-logo{ 
    padding-left: 50px; 
    float: left; 
} 
.tm-nav { 
    float: right; 
} 
.tm-nav ul li{ 
    display: inline-block; 
    margin-bottom: 0px; 
} 
.tm-nav ul li a{ 
    padding-bottom: 10px; 
    padding-top: 10px; 
    padding-left: 15px; 
    padding-right: 15px; 
    text-decoration: none; 
    color: #303030; 
    line-height: 64px; 
    font-size: 15px; 
    text-align: right; 
    border: 1px solid transparent; 
} 
.tm-container ul li a:hover{ 
    color: #000000; 
    text-shadow: 1px 0 0 currentColor; 
    border: 1px solid #303030; 
} 
.current_page a{ 
    pointer-events:none; 
    font-weight: 900; 
} 
p { 
    margin-bottom: 20px; 
} 
h1, h2, h3, h4, h5, h6 { 
    margin-bottom: 10px; 
} 
ul, ol{ 
    margin-left: 20px; 
    margin-bottom: 20px; 
} 
.tm-content{ 
    margin-top: 30px; 
    margin-bottom: 20px; 
    max-width: 100%; 
    position: relative; 
} 
.tm-article{ 
    background-color: white; 
    padding: 30px; 
} 
section { 
    background-color: white; 
} 
.trgovine img{ 
    border: 1px solid blue; 
    max-width: 33%; 
    width: 27%; 
    margin-right: 3%; 
    margin-left: 3%; 
    margin-top: 10px; 
    margin-bottom: 10px; 
    border: 1px solid black; 
    display: in-line; 
} 
.tm-footer{ 
    text-align: center; 
    background-color: white; 
    padding: 10px; 
    font-weight: 700; 
    margin-top: 30px; 
    clear: both; 
}

這裏是它是如何看起來畫面： The arrows show the space below

編輯：It's不是重複的，因爲duplicate's解決方案鴕鳥政策解決這個問題

來源

2017-07-31 IcyFox

我不是certian zzzBov掌握你的問題......雖然根據你提供的內容，他可能會走在正確的軌道上。我設置了一個快速小提琴，我發現你提供的代碼沒有問題。每當這樣的事情發生在我身上時，這是因爲我的HTML文件中有一些奇怪的字符，瀏覽器試圖顯示，導致意外的空間被佔用在屏幕上。嘗試在另一個文本編輯器（如NPP）或十六進制編輯器中查看您的標記，以檢查可能導致此問題的字節順序標記或其他異常字符。 – McHat

我可能實際上從頭開始重做頁面tomorow，使頁腳在一開始就看到問題是什麼... – IcyFox

您需要更新這行代碼：

見現場演示這裏：https://output.jsbin.com/nopetiy

.tm-footer{ 
    text-align: center; 
    background-color: white; 
    padding: 10px; 
    font-weight: 700; 
    margin-top: 30px; 
    clear: both; 
    position: absolute; 
    bottom: 0; 
    left: 0; 
    right: 0; 
}

來源

2017-07-31 19:31:41

不同意。這是一個黑客解決方案 – McHat

這是對我來說奇怪的解決方案（調整大小時在屏幕中間顯示頁腳） – IcyFox

無法將頁腳粘到頁面末尾

回答

相關問題