如何阻止我的“身体”吃掉我的“脚”答案

【问题标题】：How do I stop my 'body' from eating my 'foot'如何阻止我的“身体”吃掉我的“脚”
【发布时间】：2012-12-06 01:15:23
【问题描述】：

这是我的网站：http://mytestsite.nfshost.com/。

如果您缩小浏览器窗口，您会注意到页面的“body”标签中的内容超过了“footer”元素。相反，我希望它只是将“页脚”内容向下推而不吞噬它。

我该怎么做？

以下是 HTML 和 CSS 的相关部分。

<html>
    <head>
        -- HEAD CONTENT HERE --
    </head>
    <body>
        <h1>U.S. Neighborhood Income Map</h1>
        <h2>See how rich or poor every part of every city in America is</h2>
        <div id="address-form-container">
            <span id="form-pretext"> Enter a city name or address and pick a state (Or just a pick a state from the dropdown).</span>
            <br>
            <input id="address" type="textbox">
            ,
            <select id="state-select">
            <input type="button" value="Search">
            <br>
            <span id="note">(NOTE: If loading takes a while, try zooming in or out.)</span>
        </div>
        <div id="map-canvas" style="position: relative; background-color: rgb(229, 227, 223); overflow: hidden;">
            -- MAP HERE --
        </div>
        <div id="below-map">
            <p id="source-note" class="italics">
        </div>
    </body>
    <footer>
        <p id="contact">Please send all questions, comments, complaints, and suggestions to [EMAIL ADDRESS]</p>
    </footer>
</html>

这是相关的 CSS

html {
    float: right;
    height: 100%;
    text-align: center;
    width: 100%;
}

body {
    background:url(./images/bg.png);
    height: 85%;
    position: relative;
    right: 8px;
    width: 100%;

}

#map-canvas {
    height: 75%;
    margin-top: 5px;
    width: 100%;
}

footer {
    margin-top: 3em;
}

【问题讨论】：

这可能是我在 SO 上看到的最有趣的问题标题。
这可能是我在 Stack Overflow 上见过的最可怕的标题。
页脚必须在body标签内。
@alex2php，请取消删除您的回答...这是正确的。
是的，见this related question

标签： html css footer

【解决方案1】：

页脚必须在正文标签内。

【讨论】：

谢谢，成功了。不过，我认为“页脚”标签是“允许的”（因为没有更好的词）在正文之外。我的想法不正确吗？如果是这样，我想知道为什么它不允许在体外......
body 包含构成可视页面的全部数据。在它之外只有head 用于元数据。请参阅@jeff 所指出的stackoverflow.com/q/5492492/781965
嗯，这似乎会让人们感到困惑——至少对我而言。我的意思是，“head”可以在“body”之外，那么为什么不可以“footer”呢？好吧，无论如何，至少现在我知道了。谢谢。
根据dev.w3.org/html5/markup/footer.html#footer，页脚必须有一个支持流元素的父级。 html标签没有。
head 不是header。

【解决方案2】：

使用 CSS 填充

footer {
    padding-top: 25px;
}

【讨论】：

【解决方案3】：

用class = "clear"创建一个部门

css

div.clear {
     clear:both
}

在您希望随着页面内容增长而下推的任何部门上方使用此选项。正如亚历克斯所说，页脚也必须在正文标签中。

【讨论】：