CSS 配置 DIV 絶対bottom_html/css_WEB-ITnose

CSS は DIV の絶対的な最下位に位置します

Web ページ制作 Webjx 記事の紹介: CSS の単純さは学習の容易さにあり、CSS の難しさはより良い解決策を見つけることにあります。 CSS の世界では、完璧というものは存在しないようです。したがって、今回紹介する CSS は絶対的な最下位であり、私がこれまで見てきた解決策の中で最も完璧な解決策にすぎません。

CSS のシンプルさは学習のしやすさにありますが、CSS の難しさはより良いソリューションを見つけることにあります。 CSS の世界では、完璧というものは存在しないようです。したがって、今回紹介する CSS は絶対的な最下位であり、私がこれまで見てきた解決策の中で最も完璧な解決策にすぎません。

まず、この CSS ボトム レイアウト ソリューションを使用する理由について話しましょう:

それがページの場合、ページのコンテンツが非常に小さく、1 つの画面のウィンドウ領域を満たすのに十分ではない場合、通常の規則に従ってレイアウトでは、次の図が表示されます。 外観 (つまり、下部のコンテンツがウィンドウの下部に配置されず、多くの空白が残ります。)

不完全さを追求するデザイナーにとって、これは美しくありません。オンラインでいくつかの解決策がありますが、ウィンドウの高さを変更すると、下部がテキストと重なってしまいます。問題なくウィンドウの高さを変更できる人は多くありませんが、完璧を追求することで私はこれを見つけました。私が海外で見つけた比較的完璧な方法は、純粋な CSS であるデザインの専門家が実現できます。テキストの内容が小さい場合、ウィンドウの高さを変更しても、下部がウィンドウの下部に来るようになります。

この CSS を作成した人も、この CSS 下部レイアウト スキームを紹介する Web サイトを特別に設立しました。特許を申請しているのではないかと思います:)

HTML code:

>
& lt;/div>

注: このレイアウトを使用するための前提条件は、フッターが一般的な div コンテナの外側では、フッターはレイヤーを使用し、他のすべてのコンテンツは一般的なレイヤーを使用します。本当に他の兄弟レイヤーを追加する必要がある場合、この兄弟レイヤーは絶対位置指定にposition:absoluteを使用する必要があります。



Web ページ制作入門 Webjx の記事: CSS のシンプルさは学習のしやすさにあり、CSS の難しさはより良いソリューションを見つけることにあります。 CSS の世界では、完璧というものは存在しないようです。したがって、今回紹介する CSS は絶対的な最下位であり、私がこれまで見てきた解決策の中で最も完璧な解決策にすぎません。

CSS コード:

以下は、下部がウィンドウの下部に表示されるようにするためのメイン CSS コードです:

html, body, #wrap {height: 100%;}

body > {height : auto; min-height: 100%;}

#main {padding-bottom: 150px;} /* フッターと同じ高さを使用する必要があります*/

#footer {position:relative;

margin-top: -150px ; / * フッターの高さの負の値*/

height: 150px;

clear:both;}

注: 注意する必要があるのは、#main のパディング値、フッターの高さ、および負のマージン値を指定する必要があることです。一貫性を保つこと。

とてもシンプルですが、まだ終わっていません。メインでフローティング レイアウトを使用している場合は、ブラウザの互換性の問題をいくつか解決する必要があります。ここでは、Google Chrome に焦点を当てます。

#main セクションで有名な Clearfix ハックを実行します:

.clearfix:after {content: ".";

display: block;

height: 0;

clear: Both;

visibility: hidden;}

.clearfix {display: inline-block;}

/* IE-mac から非表示にする */

* html .clearfix { height: 1%;}

.clearfix {display: block;}
/* IE-mac から非表示にするのを終了 */注: このソリューションは 2 列のフローティング レイアウトでテストされており、Google Chrome を含むすべての主要なブラウザと互換性があります。

追記:
インターネット上で以前からよく知られていたフッター レイアウトは Ryan Faits によって作成されましたが、そのメソッドでは HTML コード内に空の div レイヤーが含まれます。厳密に言えば、セマンティック Web コード標準には準拠していません。 また、A List Apart の Exploring Footers という記事もありますが、これには JavaScript コードが使用されています。 この比較では、上記の一見単純な純粋な CSS がはるかに優れているように見えます。