CSS - 粘脚 [英] CSS - Sticky footer
本文介绍了CSS - 粘脚的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
这个问题似乎有很多解决的问题，但它们都不适合我......
我创建了这个小小的jsfiddle来展示你： jsfiddle页脚
和CSS：
.footer {
width：798px;
border-top：2px solid＃2E181A;
明确：两者;
padding：5px 0 0 0;
background-color：inherit;
text-align：center;
bottom：0;
背景颜色：＃E6D9BD;
职位：亲属;
height：30px;
保证金：-30px auto 2px auto;
z-index：30;
}
.container {
width：788px;
margin：0px auto 0px auto;
padding：0px 0px 30px 0px;
border：5px solid＃2E181A;
背景颜色：＃E6D9BD;
最低身高：100％;
职位：亲属;
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 之间有一点空格。
希望你能快速看看代码，看看我做错了什么！
来自 James Dean 的现代清洁CSSSticky Footer HTML
<！DOCTYPE html>
< head>
< title>< / title>
< / head>
< body>
< nav>< / nav>
< article> Lorem ipsum ...< / article>
< footer>< / footer>
< / body>
< / html>
CSS
html {
position：relative;
最低身高：100％;
}
body {
margin：0 0 100px; / *底部=页脚高度* /
}
页脚{
位置：绝对;
剩下：0;
bottom：0;
height：100px;
宽度：100％;
}
There seem to be tons of solved problems with this one, but neither of them seem to work for me...
I have created this little jsfiddle to show you: jsfiddle footer
And the 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;
}
I have set a top-border in the div.footer, and this should be visible and a little space between the border and the div.container.
Hope you will take a quick look at the code and see whatever I'm doing wrong!
解决方案
Modern Clean CSS "Sticky Footer" from James Dean
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%;
}
这篇关于CSS - 粘脚的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
