3

这是我的网站： 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;
}
4

3 回答 3

3

页脚必须在正文标签内。

于 2012-12-06T01:17:25.843 回答
1

使用 CSS 填充

footer {
    padding-top: 25px;
}
于 2012-12-06T01:24:27.290 回答
0

创建一个部门class = "clear"

css

div.clear {
     clear:both
}

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

于 2012-12-06T01:30:18.857 回答