Question

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

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

非常感谢先进。

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

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

Answer 1

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

真实答案：
在查看您的代码后，似乎更符合您的要求：http://pastebin.com/Letx9hPA

我将页脚的位置更改为固定，以便它保留在页面底部。如果那不是您想要的，那么将所有位置一起移除，以便可以自由下推。

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

Answer 2

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

如果你以前的html是一个div或类似于包围整个上级的东西，那么使用div，不要“绝对位置”它，使用宽度：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和GOD，请不要使用那个已弃用的TAGS !!!!字体，中心等）。

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

如何使用内容推送我的页脚？

2 个答案: