html - 配置により本文がフッターと重なる

Question

ポジショニングに関係していると確信していますが、問題を解決できません。本文とフッターは、ページの最後で重なり合っています。フッターと重ならないようにボディリキッドを作成するにはどうすればよいですか？

ありがとう

JSFIDDLEはこちらです。

CSS

*
{
    margin: 0px;
    padding: 0px;
}
div
{
    display: block;
}

/* --- BODY ------------------------------------------------ */
#body_block
{
    float: left;
    width: 100%;
    background: #EEEEEE;
    /*background-image: url('../images/bg3.jpg');*/
}
#body
{
    margin: 0 auto;
    position: relative;
    width: 900px;
    /*background: #BB0099;*/
}
#body_title
{
    position: absolute;
    top: 15px;
    left: 0px;
    width: 200px;
    /*height: 24px;*/
    background: #aa99ff;
}
#body_search
{
    position: absolute;
    top: 15px;
    right: 0px;
    width: 200px;
    /*height: 24px;*/
    background: #aa99ff;
}
#body_content
{
    position: relative;
    top: 50px;
    left: 0px;
    width: 900px;
    /*height: 24px;*/
    background: #aa99ff;
}

/* --- FOOTER ---------------------------------------------- */
#footer_block
{
    float: left;
    width: 100%;
    /*background: #DDDDDD;*/
}
#footer
{
    margin: 0 auto;
    position: relative;
    width: 900px;
    padding: 15px 0px 15px 0px;
    /*background: #CC0011;*/
}

HTML

<body>

    <div id="body_block">
        <div id="body">
            <div id="body_title"><h1>Home</h1></div>
            <div id="body_search"><h1>Search</h1></div>
            <div id="body_content">
                TOP<br /><br />BODY<br />BODY<br />BODY<br />BODY<br />BODY<br />BODY<br />BODY<br />BODY<br />BODY<br />BODY<br />BODY<br />BODY<br />BODY<br />BODY<br />BODY<br />BODY<br />BODY<br />BODY<br />BODY<br />BODY<br />BODY<br />BODY<br />BODY<br />BODY<br />BODY<br />BODY<br />BODY<br />BODY<br />BODY<br />BODY<br />BODY<br />BODY<br />BODY<br />BODY<br />BODY<br />BODY<br />BODY<br />BODY<br />BODY<br />BODY<br />BODY<br />BODY<br />BODY<br />BODY<br /><br />BOTTOM
            </div>
        </div>
    </div>

    <div id="footer_block">
        <div id="footer">FOOTER</div>
    </div>

</body>

score 1 · Accepted Answer

@DavidMillarが言ったように、フッターのフロートをクリアすると、オーバーラップの問題が解決します。ただし、一部のデザイン要素を意図したとおりに使用することで、より簡単に目的のデザインを実現できると思います。

* {
    margin: 0px;
    padding: 0px;
}

#body {
    background: #EEEEEE;
    margin: 0 auto;
    position: relative;
    width: 900px;
    /*background: #BB0099;*/
}

#body_title {
    float: left;
    width: 200px;
    /*height: 24px;*/
    background: #1199ff;
}

#body_search {
    float: right;
    width: 200px;
    /*height: 24px;*/
    background: #aa11ee;
}

#body_content {
    clear: both;
    width: 900px;
    /*height: 24px;*/
    background: #aa99ff;
}

#footer {
    width: 900px;
    padding: 15px 0px 15px 0px;
    background: #CC0011;
}

要約する：

divs はデフォルトでブロックされており、指定する必要はありません
margin/padding = 0 をオンに設定*すると、すべての要素に適用されます。個別に再適用する必要はありません。
#body_titleとは#body_search、左右に浮かせて、好きな場所に留めることができます。
#body_contentドキュメントフローに戻るために、の両方のフロートをクリアする必要があります。
position: relative要素を移動する予定がない限り、追加する必要はありません。すべてがドキュメントフロー内にあるため (上部の 2 つのフロートを除く)、それらを配置する必要はありません。

また、不要だと感じたので、ボディとフッターからラッパーを削除しましたが、簡単に元に戻すことができます。:)

新しいフィドルをチェックしてください: http://jsfiddle.net/dR82X/

score 0 · Accepted Answer

そのため、必要なレイアウトを取得する方法はたくさんあります。これは、float を使用した最も単純な方法の 1 つです。左にフローティングするとコンテナの左端にアイテムが積み上げられ、右にフローティングするとアイテムが右側に積み上げられます (スペースがなくなるまで隣同士に積み上げられ、その後、その行の下に積み上げられることに注意してください。たとえば、リンクのメニューを隣り合わせに積み重ねることができます)。clear を使用すると、要素は、それを含む要素内で先行するすべての浮動要素の下にプッシュされます。したがって、1 つのリンクを左に、もう 1 つを右にフロートさせてから、両方の下のコンテンツをクリアできます。

絶対にしたい場合

フィドル: http://jsfiddle.net/mBwP8/1/

コード：

/* --- GENERAL --------------------------------------------- */
* {
    margin: 0px;
    padding: 0px;
}

/* --- BODY ------------------------------------------------ */
#body_block {
    background: #EEEEEE;
}
#body {
    margin: 0 auto;
    position: relative;
    width: 900px;
    padding-top: 15px;
}
#body_title {
    float: left;
    width: 200px;
    background: #1199ff;
}
#body_search {
    float: right;
    width: 200px;
    background: #aa11ee;
}
#body_content {
    clear: both;
    width: 900px;
    background: #aa99ff;
}

/* --- FOOTER ---------------------------------------------- */
#footer_block {
    float: left;
    width: 100%;
}
#footer {
    margin: 0 auto;
    width: 900px;
    padding: 15px 0px 15px 0px;
    background: #CC0011;
}

トップリンクを絶対位置に配置したい場合は、次のようにすることもできますが、必須ではありません。css フロートと相対位置と絶対位置について調べます。手に入れるのは難しいかもしれませんが、手に入れたらきっと気に入るはずです。

フィドル: http://jsfiddle.net/ZRwqH/

コード：

/* --- GENERAL --------------------------------------------- */
* {
    margin: 0px;
    padding: 0px;
}

/* --- BODY ------------------------------------------------ */
#body_block {
    background: #EEEEEE;
}
#body {
    margin: 0 auto;
    position: relative; /* now we need relative here, so the *absolute positioning* of the header is *relative* to this element */
    width: 900px;
    padding-top: 55px; /* and we need to pad this because absolute positioning takes the header out of the document flow */
}
#body_header {
    position: absolute; /* taking this out of the document flow, but pushing it to the top of the (relative) container */
    top: 0;
    left: 0;
    width: 100%; /* abs positioning causing width to collapse, 100% pushes it back out to the full width of the (relative) container */
    padding-top: 15px; /* the extra space at the top */
}
#body_header > div { /* to make all the "menu" links the same dimensions */
    width: 200px;
    height: 40px;
}
 /* we can now float *inside* of the abs positioned header, note that the header element will collapse 
    to zero + padding height unless you take steps to clear or contain these floats, but since the header
    isn't needed for border or background color we don't care in this case. */
#body_title {
    float: left;
    background: #1199ff;
}
#body_search {
    float: right;
    background: #aa11ee;
}
#body_content {
    clear: both;
    width: 900px;
    background: #aa99ff;
}

/* --- FOOTER ---------------------------------------------- */
#footer_block {
    width: 100%;
}
#footer {
    margin: 0 auto;
    width: 900px;
    padding: 15px 0px 15px 0px;
    background: #CC0011;
}

score 0 · Accepted Answer

「スティッキーフッター」ソリューションのコードを実装すると、独自の問題も解決されます。

これはスティッキーフッターの説明とその解決方法です: http://ryanfait.com/sticky-footer/

また：

CSS のみのソリューション
 CSS トリックのソリューション

score 0 · Accepted Answer

元の場所から 50 ピクセル下に表示されるように本文内にコンテンツを配置したため、フッターが本文に重なっているように見えるだけです。(例position:relative;top:50px;)

フッターは実際にはコンテンツに重なっていませんがclear:both;、フッター CSS に追加することで本文の下から始まるようにすることができます。これにより、描画される前に以前のフローティング要素がクリアされます。

html - 配置により本文がフッターと重なる

4 に答える 4

Related

Reference