【发布时间】：2020-11-13 16:28:32
【问题描述】：
我正在尝试让页脚贴在页面底部。即使添加了更多内容，我也希望它保持在底部。任何帮助深表感谢。我已经尝试了几乎所有我能想到的东西。我尝试过使用不同的位置，例如相对位置、静态位置、固定位置，但有时页脚会粘在屏幕底部，即使在滚动（固定）时也可见，有时它只是粘在页面顶部（相对）。我唯一可以让它降到底部的方法是添加很多段落，但这当然不理想。感谢您的支持，如果您知道我可以如何使我的代码变得更好，那也会很有帮助。
这是我的 HTML：
<body>
<!-- START OF HEADER -->
<nav>
<ul class="nav-links">
<li><a href="æ"><img class="logo" src="wheel1.png" alt="Logo"></a></li>
<li><a href="æ">Mercedes</a></li>
<li><a href="æ">Bmw</a></li>
<li><a href="æ">Tesla</a></li>
<li><a href="æ">Jaguar</a></li>
<li><a href="æ">Land Rover</a></li>
<li><a href="æ">Nissan</a></li>
</ul>
</nav>
<!-- END OF HEADER -->
<!-- START OF MAIN CONTENT -->
<div class="modelLogo">
<img width="70px" height="70px" src="tesla.png"></img>
<br><br>
<p class="modelName">Tesla</p>
</div>
<p class="comp">Tesla, Inc. (formerly Tesla Motors, Inc.) is an American electric vehicle and alternative energy z company based in Palo Alto, California. The company specializes in electric vehicle manufacturing, battery energy storage from home to grid scale and, through its acquisition of SolarCity, solar panel and solar roof tile manufacturing.
<br><br>
Founded in July 2003 by engineers Martin Eberhard and Marc Tarpenning as Tesla Motors, the company’s name is a tribute to inventor and electrical engineer Nikola Tesla. The next three employees were Ian Wright, Elon Musk, and J. B. Straubel, all of whom are named as co-founders of the company.
</p>
<table class="cars">
<tr>
<td><img width="100%" height="auto" src="models.jpg"><br><br>Model S</td>
<td><img width="100%" height="auto" src="model33.jpg"><br><br>Model 3</td>
</tr>
<tr>
<td><img width="100%" height="auto" src="modelx.jpg"><br><br>Model X</td>
<td><img width="100%" height="auto" src="modely.jpg"><h6>Coming Soon</h6>Model Y</td>
</tr>
<tr>
<td><img width="100%" height="auto" src="roadster.png"><h6>Coming Soon</h6>Roadster</td>
<td><img width="100%" height="auto" src="roadster.png"><br><h6>Coming Soon</h6>Cybertruck</td>
</tr>
<tr>
<td><img width="100%" height="auto" src="roadster.png"><br><br>Semi</td>
<td><img width="100%" height="auto" src="roadster.png"><br><br>Semi</td>
</tr>
</table>
<!-- END OF MAIN CONTENT -->
<!-- START OF FOOTER -->
<div style="border: 1px solid black; position: relative;
bottom: 0;
width: 100%;">hello</div></p>
<!-- END OF FOOTER -->
</body>
这是我的 CSS：
*{
margin: 0px;
padding: 0px;
box-sizing: border-box;
font-family: 'Roboto', sans-serif;
}
html, body {
height: 100%;
width: 100%;
margin: 0;
}
nav{
display: flex;
position: absolute;
width: 100%;
justify-content: space-around;
align-items: center;
min-height: 50px;
background-color:black;
opacity: 0.9;
}
nav:hover{
opacity: 1;
transition: all 0.4s ease;
}
.nav-links{
display: flex;
justify-content: space-around;
width: 70%;
}
.nav-links li{
list-style: none;
}
.nav-links a{
color: white;
text-decoration: none;
letter-spacing: 1px;
font-size: 12px;
font-weight: 400;
text-transform: uppercase;
}
.nav-links a:hover{
color: grey;
transition: all 0.3s ease;
}
.logo{
width: 22px;
height: 20px;
display: flex;
border: 1px solid black;
}
.modelLogo{
position:absolute;
transform: translate(-50%, -50%);
z-index:-1;
text-align: center;
top:180px; left:50%;
}
.modelName{
color: grey;
text-decoration: none;
letter-spacing: 1px;
font-size: 40px;
font-weight: 600;
text-transform: uppercase;
border: 1px solid black;
}
.comp{
position:absolute;
transform: translate(-50%, -50%);
z-index:-1;
text-align: justify;
top:355px; left:50%;
color: #505050;
text-decoration: none;
width: 900px;
letter-spacing: 0px;
font-size: 16px;
font-weight: 300;
text-transform: capitalize;
border: 1px solid black;
}
.cars{
transform: translate(-50%, -50%);
z-index:-1;
top:1060px; left:50%;
width: 65%;
position:absolute;
border-spacing: 12px 12px;
table-layout:fixed;
text-align: center;
font-size: 16px;
border: 1px solid black;
}
td {
height:280px;
font-weight: 300;
background-color: rgb(247,247,247);
border-radius:10px;
-moz-border-radius:10px;
}
td:hover {
color: blue;
font-weight: 300;
}
h6{
font-weight: 400;
color: rgb(232,94,16);
line-height: 2;
}
【问题讨论】：