我正在使用包含 overflow:hidden; 的包装器创建网页,这是一个带有 float:left; ,内容和页脚的导航列。我在导航栏中添加了填充,因此它的背景颜色到达包装器的末尾,并将包装器设置为 overflow:hidden; ,因此它将扩展与导航列匹配。问题是我无法让页脚走到最底层。
CSS
#nav{
background:skyblue;
padding:8px 8px 350px 8px;
font-weight:bold;
float:left;}
#wrapper{
width:80%;
min-width:960px;
background:#90C7E3;
box-shadow: 8px 8px 8px gray;
margin-left:auto;
margin-right:auto;
overflow:hidden;}
#footer{
font-size:75%;}
HTML
<body>
<div id="wrapper">
<div id="nav">
<ul>
<li><a href="home.html">H</a>
<li><a href="a.html">A</a>
<li><a href="b.html">B</a>
<li><a href="c.html">C</a>
</ul>
</div>
<div id="content">
<h2>content</h2>
<p>contentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontent</p>
</div>
<div id="footer">
<p>footerfooterfooterfooterfooter<br>
<em>footerfooterfooter</em></p>
</div>
</div>
</body>
我不确定我是否正确发布了该代码,因为这是我第一次在本网站上发布。
答案 0 :(得分:1)
答案 1 :(得分:0)
您可以为页脚使用margin-top属性 JsFiddle链接:http://jsfiddle.net/L5REZ/
#footer{
margin-top:40%;
font-size:75%;
}
答案 2 :(得分:0)
您可以尝试使用
<div id="footer">
<p>footerfooterfooterfooterfooter<br>
<em>footerfooterfooter</em></p>
</div>
<br><br>
就在</body>
标记之前
这里有一些JSfiddle code
答案 3 :(得分:0)
添加
#footer
{
font-size:75%;
float: left;
width: 100%;
}
答案 4 :(得分:0)
您也可以尝试:
#footer {
width:100%;
height:80px; /* Need a fixed height */
position:absolute; /* Sets the position on a set spot */
bottom:0; /* Tells the footer div to stay at 0 which is the bottom of the page */
}
无论内容有多远,这都会将页脚向下推。
来源:http://www.cssreset.com/how-to-keep-footer-at-bottom-of-page-with-css/
希望这有帮助!祝你好运。