粘滞页脚CSS

我有一个非常基本的网站（标题，内容，页脚没有侧边栏或任何东西）问题是内容区域重叠页脚。我已经尝试了所有的粘页脚修复（即csstricks，ryanfait.com和其他一些我在谷歌发现了一些在这里和他们没有工作粘滞页脚CSS

像往常一样，任何帮助表示赞赏

<body> 
    <div class="wrapper"> 


      <div id="header"> 
      </div> 

      <div id="content">  
      </div> 

      <div id="push"> 
      </div> 

    </div> 

    <div id="footer"> 
    </div> 

</body> 



    * { 
margin: 0; 
} 

html, body { 
height: 100%; 
} 



#header{ 
    background-image:url("Images/nav.jpg"); 
    width:100%; 
    height:64px; 
} 

#content{ 
    background:#ffffff; 
    height:592px; 
    width:798px; 
    position:absolute; 
    top:80px; 
    left:20%; 
    z-index:3; 
    -moz-box-shadow: 0px 0px 8px #000000; /* FF3.5+ */ 
    -webkit-box-shadow: 0px 0px 8px #000000; /* Saf3.0+, Chrome */ 
    box-shadow: 0px 0px 8px #000000; /* Opera 10.5, IE9, Chrome 10+ */ 
} 

#wrapper { 
min-height: 100%; 
height: auto !important; 
height: 100%; 
margin: 0 auto -129px; 
} 

#footer, #push { 
height: 129px; 
} 

#footer{ 
    background-color:#292929; 
    width:100%; 
}

来源

2011-04-28 shane12195

为什么您的内容绝对定位？它似乎并不需要，并会导致您遇到的问题。卸下并页脚：

#footer { 
position: fixed; 
bottom: 0; 
height: 80px; 
}

http://jsfiddle.net/JyQxW/

来源

2011-04-28 17:51:42

内容区域是页面中间的一个框，其绝对位置使其保持在中间位置 – shane12195 2011-04-28 18:00:49

绝对定位是一个穷人以内容为中心的方式。相反，简单地添加'保证金：0汽车;' – 2011-04-28 18:06:22

这很好！现在唯一的事情是我的上边距不会工作 – shane12195 2011-04-28 18:14:04

是你试图制作一个粘滞的页脚，即一个始终在页面底部，即使你滚动，或者你只是想解决内容溢出的问题？

为了防止内容溢出，float #content向左或向右。

来源

2011-04-28 17:51:10 MoonKat1216

林试着做一个棘手的页脚 – shane12195 2011-04-28 17:58:55

在开始页脚之前，您可以尝试清除两者。

<div style="clear:both"></div> <!-- add this line just above your div footer --> 
<div id="footer">

来源

2011-04-28 17:51:42 Louie

唉。 :-)与您的数据混合的布局逻辑（HTML = ** data **，CSS =布局） – Craig 2013-12-01 21:25:26

回答

相关问题