这个问题似乎有很多已解决的问题，但它们似乎都不适合我......
我创建了这个小 jsfiddle 来向您展示：jsfiddle 页脚 http://jsfiddle.net/2jn3J/
还有CSS：
.footer {
width:798px;
border-top: 2px solid #2E181A;
clear: both;
padding: 5px 0 0 0;
background-color: inherit;
text-align: center;
bottom:0;
background-color: #E6D9BD;
position:relative;
height: 30px;
margin: -30px auto 2px auto;
z-index:30;
}
.container {
width: 788px;
margin: 0px auto 0px auto;
padding: 0px 0px 30px 0px;
border:5px solid #2E181A;
background-color: #E6D9BD;
min-height: 100%;
position:relative;
content: " "; /* 1 */
display: table; /* 2 */
}
.contentleft {
background-color: inherit;
margin:5px 10px 10px 10px;
padding:10px 5px 30px 5px;
float:left;
overflow: hidden;
width: 300px;
display:block;
}
.contentright {
background-color: inherit;
margin:5px 0px 10px 10px;
border:0px solid #2E181A;
padding:10px 5px 30px 5px;
float:left;
overflow: hidden;
width: 420px;
display:block;
}
我在中设置了一个上边框div.footer，这应该是可见的，并且边框和边框之间有一点空间div.container.
希望您快速浏览一下代码，看看我做错了什么！
现代干净的CSS“粘性页脚”来自詹姆斯·迪恩 http://mystrd.at/modern-clean-css-sticky-footer/
HTML
<!DOCTYPE html>
<head>
<title></title>
</head>
<body>
<nav></nav>
<article>Lorem ipsum...</article>
<footer></footer>
</body>
</html>
CSS
html {
position: relative;
min-height: 100%;
}
body {
margin: 0 0 100px; /* bottom = footer height */
}
footer {
position: absolute;
left: 0;
bottom: 0;
height: 100px;
width: 100%;
}
演示在这里 http://mystrd.at/data/sticky_footer.html
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
