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

フッターは body タグ内にある必要があります。

于 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 に答える