Question

请查看我的代码并帮助我使用我的页脚。我已经尝试了所有我能想到的东西，并且无法让页脚停留在底部。当我确保它保持在底部时，它会在重新调整窗口大小时重叠上面的内容。这里的想法是让页脚保留在页面底部的内容下，而不是在重新调整大小或缩放窗口时移动。

HTML

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Sgembardesign.com</title>

<!-----CSS Library----->
<link href="assets/CSS/style sheet.css" rel="stylesheet">

<!----- Java Script Library ----->
<script src="assets/js/jquery.js"></script>
<script src="assets/js/my_code.js"></script>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-           

ui.css" rel="stylesheet" type="text/css"/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js">   

</script>
<style type="text/css">
    </style>


</head>
<body>

<div class="wrapper">
<div id="menu_bar">
    <div id="menu_li">
        <ul>
            <li><a href="index.html">home</a></li>
            <li><a href="about.html">about</a></li>
            <li><a href="projects.html">projects</a></li>
            <li><a href="blog.html">blog</a></li>
        </ul>
    </div>
</div>
<hr noshade size="3">


<div id="catalogs">
    <div id="web">
    </div>

    <div id="photo">
    </div>

    <div id="mobile">
    </div>
</div>


<div class="push"></div>
<div class="footer">
    <img class="img" src="assets/img/logo.gif" alt="logo" width="500" height="300"/>
</div>

</div>

</body>
</html>


**The CSS**


*
{
margin: 0;
}
body
{
height: 100%;
background-image: url("../img/dark-metal-grid-5.jpg");
}
html
{
height: 100%;
}
.wrapper
{

width: 950px;
min-width: 950px;
min-height: 100%;
height: auto;
height: 100%;
margin: 0 auto -142px;
border-bottom: 3px solid white;
sbackground:rgb(0,0,0); /* IE6/7/8 */
filter:alpha(opacity=60); /* IE6/7/8 */
background:rgba(0,0,0,0.6); /* Modern Browsers */
}

/*--------------menu items--------------*/

#menu_bar
{
width: 725px;
height: 95px;
float: left;
position: absolute;
padding: 4em;
}

a
{
color: white;
text-decoration: none;
position: relative;
left:95px;

}
ul
{
list-style-type: none;

}
li
{
display: inline;
margin-left: 20px;

}
#menu_li
{
font-size: 45px;
font-family: Impact, Charcoal, sans-serif;
line-height: 32px;


}
#menu_bar a:hover
{
text-decoration: none;
color: #C50F0F;
}

/*---------------hr------------------*/
hr
{
width: 950px;
color: #C50F0F;
background-color: #c50f0f;
position: absolute;
top: 105px;
border-width: 0;
line-height: 0;
height: 2px;
text-align: center;
}
/*---------------Catalogs-----------*/
#catalogs
{
text-align: center;
position: relative;
}

#web
{
width: 250px;
height:225px;
position:absolute;
top:200px;
overflow: hidden;
float: left;
left:40px;
background-color: #C50F0F;
background:rgba(255,0,0,0.4);
border-bottom-right-radius: 25px;
border-top-right-radius: 25px;
border-bottom-left-radius: 25px;
border-top-left-radius: 25px;
border: solid 3px black;

}

#photo
{
width: 250px;
height: 225px;
top: 200px;
position: absolute;
overflow: hidden;
display: inline;
border-bottom-left-radius: 25px;
border-bottom-right-radius: 25px;
border-top-left-radius: 25px;
border-top-right-radius: 25px;
background-color: #C50F0F;
background:rgba(255,0,0,0.4);
left: 37%;
border: solid 3px black;

}

#mobile
{
width: 250px;
height:225px;
position:relative;
top:200px;
overflow: hidden;
float: right;
right:40px;
background-color: #C50F0F;
background:rgba(255,0,0,0.4);
border-bottom-right-radius: 25px;
border-top-right-radius: 25px;
border-bottom-left-radius: 25px;
border-top-left-radius: 25px;
border: solid 3px black;
}

.push
{
height: 142px;
}

.footer
{

width: 950px;
height: 142px;
margin-top: -142px;
clear: both;
bottom: 0px;
sbackground:rgb(0,0,0); /* IE6/7/8 */
filter:alpha(opacity=60); /* IE6/7/8 */
background:rgba(0,0,0,0.6); /* Modern Browsers */
}

.img
{
position: relative;
top: -75px;
left: -75px;
}

Answer 1

http://jsfiddle.net/Tc4be/

欢迎来到SO。这是一个非常可怕的问题。请注意我用jsFiddle做了什么。我创建了一个小问题的可观察样本。

现在问题。

    <div class="push"></div>
    <div class="footer">
        <img class="img" src="assets/img/logo.gif" alt="logo" width="500" height="300"/>
    </div>

</div>

需要

    <div class="push"></div>
</div>   <!-- Footer Outside the Wrapper div --> 
<div class="footer">
        <img class="img" src="assets/img/logo.gif" alt="logo" width="500" height="300"/>
    </div>

Answer 2

您可以放置页脚来修复它：

.footer
{
    width: 100%;
    height: 142px;
    position: fixed;
    clear: both;
    bottom: 0;
    left: 0;
    sbackground:rgb(0,0,0); /* IE6/7/8 */
    filter:alpha(opacity=60); /* IE6/7/8 */
    background:rgba(0,0,0,0.6); /* Modern Browsers */
}

它还有助于为身体添加相同数量的填充，因此您可以一直滚动到内容的末尾：

body {
    padding-bottom: 142px;
}

Answer 3

根据Joe的回答将页脚放在包装器外面
将overflow: hidden;添加到footer课程。

JSFiddle

我的粘性页脚问题？

3 个答案: