0

我有一个非常基本的网站（页眉、内容、页脚，没有侧边栏或任何东西），问题是内容区域与页脚重叠。我已经尝试了所有的粘性页脚修复（即 csstricks、ryanfait.com 和我在 google 上找到的一些其他内容，还有一些在这里，但它们都不起作用

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

    <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%;
}
4

3 回答 3

2

为什么你的内容是绝对定位的？它似乎不需要，并且会导致您遇到的问题。删除它并制作页脚：

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

http://jsfiddle.net/JyQxW/

于 2011-04-28T17:51:42.583 回答
0

您是想制作一个粘性页脚，即即使滚动时也始终位于页面底部的页脚，还是只是想解决内容溢出问题？

为防止内容溢出，#content请向左或向右浮动。

于 2011-04-28T17:51:10.663 回答
0

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

<div style="clear:both"></div> <!-- add this line just above your div footer -->
<div id="footer">
于 2011-04-28T17:51:42.220 回答