我在应该重叠但不超过页脚的一侧制作了一些内容，比如页面应该更长，这样就可以说它不是。我真的不知道该怎么说，但我想把侧面板/最近的新闻拖下来，然后当recent-news结束时，页脚在右下角。
我的HTML代码
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/main.css">
<title>EcoNews</title>
</head>
<body>
<header>
<a href="#"><img class="logo" src="assets/img/icon.png"></a>
<a href="#"><h1>EcoNews</h1></a>
<nav>
<ul>
<li><a href="#">News</a></li>
<li><a href="#">Tips</a></li>
<li><a href="#">Donate</a></li>
<li><a href="#">Partners</a></li>
<li class="dropdown">
<a href="#">Account</a>
<div class="dropdown-content">
<a href="#login">Login</a>
<a href="#signup">Signup</a>
</div>
</li>
</ul>
</nav>
</header>
<aside>
<div class="container recent-news">
<ul>
<li class="article">
<h1>Title of news page</h1>
<p>Lorem ipsum dolor sit amet consectetodit</p>
<img src="assets/img/icon.png">
</li>
<li class="article">
<h1>Title of news page</h1>
<p>Lorem ipsum dolor sit amet consectetodit</p>
<img src="assets/img/icon.png">
</li>
<li class="article">
<h1>Title of news page</h1>
<p>Lorem ipsum dolor sit amet consectetodit</p>
<img src="assets/img/icon.png">
</li>
</ul>
</div>
</aside>
<footer>
<h2>EcoNews</h2>
<ul>
<li>
<a href="index.html">Home</a>
</li>
<li>
<a href="#">Recent News</a>
</li>
<li>
<a href="#">About</a>
</li>
</ul>
</footer>
</body>
</html>
我的CSS代码
body {
margin: 0%;
padding: 0%;
}
/* Global tags */
.container {
text-align: center;
}
a {
text-decoration: none;
color: black;
}
ul {
list-style-type: none;
}
/* Header */
header {
background-color: #449342;
}
.logo {
width: 10%;
}
/* selects all a tag in the header instead change it to class specific for the top */
header a:hover {
font-size: 20px;
}
header h1 {
text-align: center;
color: black;
transition: 0.3s;
}
/* Navigation */
nav {
background-color: #2EAF7D;
text-align: center;
}
nav ul {
margin-bottom: 0%;
}
nav ul li {
margin: 0% 5% 0% 5%;
display: inline;
}
nav ul li a {
color: black;
text-decoration: none;
font-size: 20px;
}
nav ul li a:hover {
color: rgba(0, 0, 0, 0.6);
}
/* Nav dropdown */
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
z-index: 1;
text-align: center;
}
.dropdown-content a {
font-size: 16px;
}
.dropdown:hover .dropdown-content {
display: block;
}
/* Recent articles */
.recent-articles {
background-color: chartreuse;
width: 50%;
}
.recent-articles ul {
margin: 0%;
padding: 0%;
}
/* News content */
.recent-news {
background-color: #449342;
width: 30%;
float: right;
}
.recent-news ul {
margin: 0;
padding: 0%;
}
.article {
border-bottom: solid black 1px;
}
/* Article Title */
.article h1 {
font-size: 24px;
}
/* Article body paragraph */
.article p {
font-size: 16px;
}
/* Article Image */
.article img {
width: 10%;
}
/* Footer */
footer {
background-color: #2EAF7D;
position: fixed;
left: 0;
bottom: 0;
height: 100px;
width: 100%;
text-align: center;
}
footer ul {
list-style-type: none;
padding: 0%;
}
footer li {
display: inline;
}
footer ul li a {
margin: 0% 3%;
text-decoration: none;
color: black;
}
footer ul li a:hover {
color: rgba(0, 0, 0, 0.5);
}
试试这个
footer{ clear: both; }
如果你能发布整个html标记，那就太好了。我建议您使用flexbox进行站点布局