无法将页脚粘到页面末尾

我目前在学习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

无法将页脚粘到页面末尾

回答

相关问题