<分区>
我目前正在学习 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>
© 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
编辑:它不是重复的，因为重复的解决方案不能解决这个问题