css - 为什么我的内容在我的页脚下？

Question

我对开发网站有点菜鸟，但希望能学到更多。我遇到的问题是，如果页面包含越来越多的内容，我的主页内容就会出现在页脚下方。 ( https://i.imgur.com/LeqVBwl.png )

要么我做错了什么，要么我只是遗漏了一些东西，但是，我是这样做的:

我该如何解决这个问题？我必须添加/删除一些东西吗？“position: absolute”在底部是这样写的

CSS:

body {
margin: 0 0 65px;
background: #000000 url(../images/bg.png);
padding-bottom: 65px;
}

#menu {
height: 50px;
padding-left: auto;
padding-right: auto;
background: #ccc no-repeat left top;
font-family: Arial, Helvetica, sans-serif;
}

#menu ul {
margin: 0;
padding: 0;
list-style: none;
line-height: normal;
}

#menu li {
float: left;
}

#menu a {
display: block;
float: left;
padding: 18px;
margin-right: 1px;
background: lightgray no-repeat;
text-decoration: none;
font-size: 10px;
color: #FFFFFF;
}

#menu a:hover {
color: #FFFFFF;
background: darkgray;
}

.main {
width: 1300px;
margin-right: auto;
margin-left: auto;
margin-top: 20px;
border: 1px black solid;
}

.content {
font-family: "Trebuchet MS", Helvetica, sans-serif;
margin-top: 40px;
margin-right: auto;
border: 1px solid #ccc;
width: 800px;
float: left;
background: white;
border-radius: 2px;
}

.content h2 {
font-size: 18px;
font-weight: bold;
border-bottom: 1px solid #ccc;
text-align: center;
}

.sidebar {
font-family: "Trebuchet MS", Helvetica, sans-serif;
margin-top: 40px;
margin-left: 30px;
margin-right: auto;
border: 1px solid #696969;
width: 300px;
float: right;
background: #EDEDED;
border-radius: 2px;
}

.sidebar h2 {
font-size: 15px;
font-weight: bold;
border-bottom: 2px solid #ccc;
text-align: center;
}


#footer {
font-family: "Trebuchet MS", Helvetica, sans-serif;
background: #ccc no-repeat left;
border-top: 3px solid;
left: 0;
bottom: 0;
height: 65px;
width: 100%;
}

#footer .footer-content {
font-weight: bold;
color: #262626;
font-size: 14;
}

#footer .footer-content a {
color: #545454;
text-decoration: none;
font-size: 14px;
}

#footer .footer-content a:hover {
color: #6E6E6E;
text-decoration: none;
font-size: 14;
}

HTML:

<div id="footer">
    <div class="footer-content">
        <center>
            <a href="">Home</a> | <a href="">Forums</a> | <a href="">Contact</a> | <a href="">Signup</a> |<a href="">Login</a>
        </center>
    </div>
</div>

---

固定

我似乎已经解决了我的问题。我刚刚添加:

<div style="clear: both;">&nbsp;</div>

Answer 1

这是因为您的页脚应用了 position: absolute;，这意味着它会跳出页面的正常流程。要修复它，请在页面底部添加一个等于页脚高度的填充。

body {
    padding-bottom: 65px; 
}