0

HTML+CSS を使用して次の固定テーブル レイアウトを実装しました: http://onofri.org/example/WebTemplate/

（いくつかの設定を確定する必要があります）

このレイアウトには#contentと#sidebarの 2 つのフローティング列があり、これらの列の下にフッター div #footcontainerが配置されています

わかりましたので、2 つの列の下に配置する要素をクリアする必要があります (ドキュメントの通常のフローに要素を戻します)。これを行うには、clear CSS プロパティを使用します。

私はいくつかの異なる方法でそれを行うことができると読みました。

私の例では、次の CSS 設定を持つ ID clearer2を持つ空の div を作成しました。

#clearer2{
    clear: both;
}

これはうまくいきますが、次の方法でフッターコンテナを直接クリアすることもできます:

#footcontainer {
    clear: both;
    width: 100%;
    min-height: 200px;
    height: auto !important;
    height: 200px;
    background: #4f4f4f url(../images/bgfooter.jpg) repeat-x 0 0;
    box-shadow: 0 -13px 25px 5px #b2b2b2;
}

clear: both;を設定したため、論理レベルでは同じである必要があります。このプロパティは、アイテムのすべての連続するアイテムに対して有効です。しかし、オンラインで読むと、最初の解決策は2番目の解決策よりも優れているように思えます。新しいアイテムを (空の div として) 作成してクリアし、適切な要素 (この例では div #footercontainer )で直接実行する方が良いのはなぜですか?

私が使用しているソリューションは有効なソリューションですか?

TNX

アンドレア

4

1 に答える 1

0

サンプル ページから、2 つのバージョンがあります。

空のクリアラーを使用した HTMLdiv 

<div id="container">
    <div id="content">...</div>
    <div id="sidebar">...</div>
    <div class="clearer"></div>
</div>
<div id="footcontainer">
    <div id="footer">...</div>
</div>

CSS:

#content, #sidebar { float: left; }
.clearer {
    clear: both;
    visibility: hidden;
}

そして空なしでdiv 

<div id="container">
    <div id="content">...</div>
    <div id="sidebar">...</div>
</div>
<div id="footcontainer" class="clearer">
    <div id="footer">...</div>
</div>

CSS:

#content, #sidebar { float: left; }
.clearer { clear: both; }

どちらのアプローチも有効で、視覚的な結果は同じです。

しかし、最初の例でcontainerは、空の明確な div のため、高さがゼロではありません。フローティング div は通常のフローから削除されるためcontainer、2 番目の例の にはコンテンツがなく、高さがゼロです。

于 2013-07-21T10:28:09.020 に答える