Question

我目前正在学习CSS＆amp; 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

编辑：这不是重复，因为副本的解决方案无法解决此问题

Answer 1

您需要更新以下代码行：

点击此处观看现场演示：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;
}

无法将我的页脚粘贴到页面末尾

1 个答案: