Question

我用Google搜索并阅读了关于制作“粘性页脚”的所有内容，但由于某种原因，我无法让它正常工作。这是我的html / body div，主要内容div和我的页脚div的CSS代码：

body, html {
margin-top: 5px;
margin-bottom: 5px;
padding: 0px;
height: 100%;
font-family: Cooper Black, Copperplate Gothic Bold, Britannic Bold, Garamond, Arial;
font-size: 1em;
color: #666666;
background-color: #EDF5FC;}

#main {
position: relative;
top: 380px;
width: 90%;
height:100%;
min-height: 100%;
margin: 0px 5% -20px 5%;
z-index: 10;
padding-top: 0px;
padding-bottom: 20px;
overflow:scroll;}

#footer {
clear:both;
position:fixed;
margin-left:auto;
margin-right:auto;
margin-bottom:0px;
margin-top: -20px; /* negative value of footer height */
width:98%;
height:20px;
padding-top:3px;
background: #0E28B1;
text-align: center;
color: #ffffff;
font-size: .7em;
font-weight:bold;
z-index:1;}

我的页脚Div在我的主div之外（该网站的主要内容在主div内，然后我关闭它并且有页脚div。）我可以通过使用固定位置和边距将其粘在底部-bottom：0，但是我的内容没有滚动条。

这根本不起作用。我做错了什么？

Answer 1

我终于找到了适合我的解决方案！我找到了这个网站：http://boagworld.com/dev/fixed-footers-without-javascript/并稍微修改了一下代码，以便我的页脚文本在垂直和水平方向都很好地居中，并在主（内容）div中添加了我的页面顶部高度。我想如果没有第三个“#Wrapper”div包含所有内容，这将无法正常工作 - 所以现在这里是我的包装器，主要和页脚css，用于那些有相同问题的人：

#wrapper {
display: block; 
position: absolute; 
min-height: 100%; }

#main {
display: block;
top: 400px;
width: 90%; 
margin-bottom: 20px; }

#footer {
position: fixed; 
display: block; 
bottom: 0; 
height: 20px; 
background: #0E28B1;
width: 98%;
margin-right:auto;
margin-left:auto;
font-size: .7em;
font-weight:bold;
font-family: Cooper Black, Copperplate Gothic Bold, Britannic Bold, Garamond, Arial;
color: #ffffff;
text-align:center;
z-index:2;
padding-top:3px;}

我必须在页脚2而不是1中创建z-index才能将页脚保持在内容文本的顶部。但现在它有效。在找到这个解决方案之前，我曾经搜索了很多网站（包括这个网站），所以我希望这可以帮助别人。

不能制作我的页脚并为内容提供滚动条

1 个答案: