1

好的，所以我正在设计的页面上有这个页脚，但是我遇到了问题；页脚粘在页面底部，但内容可以超越它......这就是我的意思 - http://i46.tinypic.com/2zted15.png。

这是我的页脚的 CSS/HTML 代码：http: //pastebin.com/ZKCuBjhn

非常感谢先进。

编辑：这是整个页面的代码 - HTML 代码：pastebin.com/RAj11cPP --- CSS 代码：pastebin.com/0kMgb1R2

注意：代码中荒谬的
标签数量是为了证明我的问题。

4

2 回答 2

0

尝试添加clear: both;到您的页脚样式。很高兴看到页面其余部分的代码。

真正的答案：
查看您的代码后，似乎这更像是您想要的：http: //pastebin.com/Letx9hPA

我将页脚的位置更改为固定，使其保持在页面底部。如果这不是您想要的，则将位置全部移除，以便可以自由地向下推。

此外，我将您的内容包装在一个内容 div 中，以便我可以在底部添加所需的垫片以使其全部可见。padding-bottom: 100px通过设置页脚高度添加的间隔。

于 2012-05-08T21:20:52.500 回答
0

您正在使用 position: absolute 的 div，因此您将其从页面的正常流程中删除，之后，上部内容将通过。

如果您之前的 html 是一个 div 或类似的包含整个上级部分的内容，则使用 div，不要“绝对定位”它，使用 width: 100% 和 margin: 0 auto; 问题不在于您的页脚，而在于页脚之前的代码。

如果它是一个 div，你必须给出一些高度，但使用最小高度，所以当它里面的内容溢出时，div 表现得很好，并将你的页脚向下推。如果您使用高度，那么 div 将采用该高度，并且您溢出的内部将泄漏。

这是一个简单的代码：

body {
        background-color: #d6d6d6;
    }

    .header {
        background-color: #006F8D;
        color: #fff;
        margin: 0 auto;
        width: 600px;
        height: 100px;
    }

    .center {
        background-color: #fff;
        color: #454545;
        margin: 0 auto;
        width: 600px;
        min-height: 100px;
    }

    .footer {
        background-color: #fff;
        color: #454545;
        margin: 0 auto;
        width: 600px;
        height: 50px;
        border-top: 1px solid #ccc;
    }

这是 CSS，现在是 HTML：

<div class="header">menu 1 - menu2 - menu3</div>
    <div class="center">Middle<br />
    Middle<br />
    Middle<br />
    Middle<br />
    Middle<br /><br />
    v
    v
    Middle<br /><br />Middle<br /><br />Middle<br /><br />v
    v<br />v
    Middle<br /><br />v
    v<br />Middle<br />
    v
    v
    v
    v
    v
    v
    vMiddle<br />Middle<br />Middle<br />Middle<br />
    <br />Middle<br />Middle<br />Middle<br />Middle<br />Middle<br />Middle<br />Middle<br />
</div>
<div class="footer">Footer</div>

如果您需要绝对定位您的页脚，那么答案是另一个。澄清一下，我会回答另一个问题。

编辑：你的代码和我的（没有使用你的css和上帝，不要使用不推荐使用的标签！！！！字体，中心等）

   <style type="text/css">
           .header {
        background-color: #006F8D;
        color: #fff;
        margin: 0 auto;
        width: 600px;
        height: 100px;
    }

    .center {
        background-color: #fff;
        color: #454545;
        margin: 0 auto;
        width: 600px;
        min-height: 100px;
    }

    .footer {
        background-color: #fff;
        color: #454545;
        margin: 0 auto;
        width: 600px;
        height: 50px;
        border-top: 1px solid #ccc;
    }
</style>
</head>
<title>Website Homepage</title>
<body>

<!--====================Begin Navigation Bar========================-->
<div class="header" id="navigation">
<div style="float:left;">
    <a href="index.html">Home</a>
    <a href="signup.html">Sign Up</a>
    <a href="login.html">Login</a>
    <a href="#">Link</a>
    <a href="#">Link</a>
    <a href="#">Link</a>
</div>
 </div>
<!--====================End Navigation Bar==========================-->

<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<!--====================Begin Content Area======================-->
<div class="center" style="padding:10">
See my problem?
</div>
<!--====================End Content Area========================-->

    <!--====================Begin Footer========================-->

<div class='footer'>
<div style="padding-top:20px;">

                Website. All Rights Reserved.

<form action="http://www.google.com/search" method="get" onSubmit="Gsitesearch(this)">
<input name="q" type="hidden" />
<input type="text" placeholder="Search our site..." name="qfont" /> <input type="submit" value="Search" />
</form>
</div>
</div>

    <!--====================End Footer==========================-->

</body>
</html>
于 2012-05-08T21:41:43.567 回答