Question

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

Answer 1

页脚必须在body标签内。

Answer 2

使用css padding

footer {
    padding-top: 25px;
}

Answer 3

使用class = "clear"

创建一个部门

CSS

div.clear {
     clear:both
}

在页面内容增长时使用以下任何想要下推的部门。 Alex还说，页脚必须是正文标记。

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

3 个答案: