Question

我是开发网站的菜鸟，但希望了解更多信息。我遇到的问题是，如果页面包含越来越多的内容，我的主页内容将在我的页脚下。（https://i.imgur.com/LeqVBwl.png）

要么我做错了什么，要么我只是错过了一些东西，但是，这就是我的做法：

我该如何解决这个问题？我必须添加/删除某些内容吗？＆＃34;位置：绝对＆＃34;它是在底部说的

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

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

固定

1 个答案: