[英]Issue in sticky footer in HTML5 and CSS
这是我的代码:
<footer>
<div id="footer">
<div class="footer-column" id="footer_column1">
<nav class="footer-link">
<ul>
<li>Home</li>
<li>Home</li>
<li>Home</li>
<li>Home</li>
<li>Home</li>
<li>Home</li>
</ul>
</nav>
</div>
<div class="footer-column" id="footer_column2">
<nav class="footer-link">
<ul>
<li>Home</li>
<li>Home</li>
<li>Home</li>
<li>Home</li>
<li>Home</li>
<li>Home</li>
</ul>
</nav>
</div>
<div class="footer-column" id="footer_column3">
<nav class="footer-link">
<ul>
<li>Home</li>
<li>Home</li>
<li>Home</li>
<li>Home</li>
<li>Home</li>
<li>Home</li>
</ul>
</nav></div>
<div class="footer-column" id="footer_column4">
<nav class="footer-link">
<ul>
<li>Home</li>
<li>Home</li>
<li>Home</li>
<li>Home</li>
<li>Home</li>
<li>Home</li>
</ul>
</nav>
</div>
</div>
</footer>
我使用HTML5和CSS创建了粘性页脚。
和CSS:
#footer {
position:absolute;
clear:both;
bottom:0;
color:#000;
width:100%;
height: 100px;
background:#fff;
margin-top:100px;
left:0;
}
.footer-column {
float: left; /* Push the div as far up-left as it can be put */
width: 25%; /* Make sure to subtract the padding */
padding: 10px; /* We want padding on all sides to make things look nice */
text-align:center;
}
.footer-column .footer-link ul li
{
list-style-type:none;
display:block;
}
和CSS涡卷是, #wrap{width:100%;}
现在页面看起来像这样, http://s28.postimg.org/qrt1vysy5/Untitled_1_copy.png 。
我可以知道,为什么我不能设置我的粘性页脚的正确高度吗?
谁能帮我解决这个问题?
相关代码:
#main {overflow:auto;
padding-bottom: 180px;} /* must be same height as the footer */
#footer {position: relative;
margin-top: -180px; /* negative value of footer height */
height: 180px;
clear:both;}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.