我正在尝试将页脚放在页面底部。
我的html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<div id="main">
<header id="main__header">
<div id="logo"></div>
<div id="search">
<form>
<input type="text" value="Search..." />
</form>
</div>
<nav>
<ul>
<li id="home"><a href="#">Home</a></li>
<li id="about"><a href="#">About Us</a></li>
<li id="carrers"><a href="#">Carrers</a></li>
<li id="newsletter"><a href="#">Newsletter</a></li>
<li id="contact"><a href="#">Contact</a></li>
</ul>
</nav>
</header>
<section id="body__section">
<section id="left__section" class="margin__section">
<article id="news1">
<img src="images/pic.jpg" width="200" height="170" alt="pic1" />
<header> </header>
<div>
<p> </p>
</div>
</article>
<article id="news2">
<img src="images/pic.jpg" width="200" height="170" alt="pic2" />
<header> </header>
<div>
<p> </p>
</div>
</article>
<article id="news3">
<img src="images/pic.jpg" width="200" height="170" alt="pic2" />
<header> </header>
<div>
<p> </p>
</div>
</article>
<article id="news4">
<img src="images/pic.jpg" width="200" height="170" alt="pic3" />
<header> </header>
<div>
<p> </p>
</div>
</article>
</section>
<section id="right__section" class="margin__section">
<aside id="social"></aside>
<aside class="ad"></aside>
<aside class="ad"></aside>
</section>
</section>
<footer> </footer>
</div>
</body>
</html>
我的样式.css
* {
margin: 0;
padding: 0;
}
html, body, #main {
height: 100%;
}
html, body, #main_header, nav, ul, footer {
width: 100%;
}
#main {
position: relative;
margin: 0 auto;
width: 1100px;
}
#main__header {
position: relative;
height: 180px;
margin: 0 auto;
background-color: #ff532a;
}
#logo {
position: relative;
top: 5px;
left: 20px;
border: 1px solid #fff;
width: 206px;
height: 75px;
}
#search {
position: absolute;
top: 5px;
right: 20px;
}
nav {
position: absolute;
bottom: 10px;
}
ul {
display: block;
list-style-type: none;
clear: right;
width: 1061px;
margin: 0 auto;
}
nav ul li {
display: block;
width: 209px;
float: left;
margin-left: 4px;
}
#home {
margin-left: 0px !important;
}
nav ul li a {
display: block;
text-align: center;
text-decoration: none;
color: #fff;
font-size: 1.4em;
height: 35px;
padding: 5px;
border: 1px solid #fff;
border-radius: 8px;
}
#body__section {
width: 100%;
height: 100%;
padding-bottom: 20px;
}
#left__section {
width: 810px;
height: 100%;
float: left;
}
#right__section {
width: 250px;
height: 100%;
float: right;
border-top: 1px solid #d2d3d2;
}
.margin__section {
margin-top: 30px;
}
article {
position: relative;
border-top: 1px solid #d2d3d2;
border-bottom-width: thin;
height: 230px;
width: 100%;
}
section article img {
margin: 30px;
}
section article div {
position: absolute;
top: 30px;
right: 0px;
width: 550px;
height: 170px;
background-image: url('images/article.jpg');
}
.border__solid {
border: 1px solid #000;
}
#right__section aside {
width: 100%;
margin-top: 30px;
}
#social {
height: 50px;
background-color: #e7e8e7;
}
.ad {
height: 377px;
background-color: #ffffa1;
}
footer {
left: 0px;
right: 0px;
bottom: 0px;
height: 180px;
background-color: #beb0ff;
}
问题是灰色页脚停留在该部分下方的中间。我真的希望页脚位于页面底部，而不是固定的。
最佳答案
您需要在容器部分中的两个 float 部分之后添加一个带有“clear: both”的元素。然后，您必须从您的容器部分中删除“高度:100%”。
因此，添加到您的 CSS 中:
.clear {
clear: both;
}
将您的“#body__section”更改为:
#body__section {
width: 100%;
height: auto;
padding-bottom: 20px;
}
然后添加到您的 html，就在“body__section”结束之前:
<div class="clear"></div>
关于html - 页面底部的页脚，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/42876074/