0

我已经用谷歌搜索并阅读了关于制作“粘性页脚”的所有内容，但由于某种原因，我无法让它正常工作。这是我的 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。）我可以通过使用固定位置和 margin-bottom 让它粘在底部： 0，但是我的内容没有滚动条。

这根本行不通。我究竟做错了什么？

4

1 回答 1

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 中设置 z-index 而不是 1，以将页脚保持在内容文本的顶部。但现在它起作用了。在找到此解决方案之前，我已经搜索了很多网站（包括这个），所以我希望这对某人有所帮助。

于 2012-09-17T13:16:12.310 回答