あなたのdivをずっと下に到達させる方法は? 親divの垂直スペースを埋める方法は? 背景画像を使用せずに同じ長さの列を取得する方法は?
可能な限り簡単かつ効率的に同じ長さの列を実現する方法を理解するために、コードをグーグルで調べて分析するのに数日を費やしました. これが私が思いついた答えであり、この知識をコミュニティのコピー アンド ペースト スタイルと小さなチュートリアルで共有したかったのです。
これが重複していると思う人にとっては、そうではありません。http://matthewjamestaylor.com/blog/equal-height-columns-cross-browser-css-no-hacksなど、いくつかの Web サイトに触発されましたが、以下のコードはユニークです。
display: tableより簡単な解決策として、次のように親とその子を指定できますdisplay: table-cell。
.parent {
display: table;
}
.child {
display: table-cell;
}
DEMOを参照してください。
これはIE7では機能しないため、IE7のサポートが必要な場合は、より複雑なソリューションが必要になることに注意してください。
最新の Web デザインでトリッキーなことの 1 つは、すべての列が同じ高さである 2 つ (またはそれ以上) 列のレイアウトを作成することです。純粋な CSS でこれを行う方法を見つけるための探求に着手しました。
これを最も簡単に実現するには、両方の列 (またはページの背景) を保持するラップ div で背景画像を使用します。
CSS テーブル セルを使用してこれを行うこともできますが、残念ながらこれに対するブラウザーのサポートはまだ不明であるため、推奨されるソリューションではありません。読んでください、もっと良い方法があります。
Web 上の 2 つのページからインスピレーションを得ましたが、私は自分のソリューションの方が好きです。丸みを帯びた角と正確な幅またはパーセント レイアウトを使用する自由度が高くなり、編集が容易になるためです。div を保持する最終的なレイアウトは強制されません。負の数のクランチを行う。
== トリック: ==
最初に背景デザインの列を作成してから、通常のコンテンツを保持できる全幅の div を配置します。トリックは、列内の浮動列に関するすべてであり、コンテンツの長さが長くなると、どの列が最も長くても、すべての親列にプッシュ効果が生じます。
この例では、角を丸くした中央の wrap-div で 2 列のグリッドを使用します。簡単にコピー＆ペーストできるように、毛羽立ちを抑えようとしました。
== ステップ 1 ==
基本的な Web ページを作成します。
<!DOCTYPE HTML>
<html>
<head>
</head>
<body>
</body>
</html>
== ステップ 2 ==
別のフローティング div 内に 1 つのフローティング div を作成します。次に、内側の div に負のマージンを適用して、フレームから視覚的に飛び出させます。説明のために点線の境界線を追加しました。外側の div を左にフロートさせ、内側の div に負のマージンを左に与えると、内側の div はスクロール バーを表示せずにページの端の下に移動することに注意してください。
<!DOCTYPE HTML>
<html>
<head>
<style>
#rightsideBG{
float:right;
background:silver;
width:300px;
border: 3px dotted silver; /*temporary css*/
}
#leftsideBG{
float:left;
background:gold;
width:100px;
margin-left:-100px;
border: 3px dotted gold; /*temporary css*/
}
</style>
</head>
<body>
<div id="rightsideBG">
<div id="leftsideBG">
this content obviously only fits the left column for now.
</div>
</div>
</body>
</html>
== ステップ 3 ==
内部の div: すべての列を組み合わせた背景なしの div を作成します。内側の div の端を押し上げます。説明のために点線の境界線を追加しました。これがコンテンツのキャンバスになります。
<!DOCTYPE HTML>
<html>
<head>
<style>
#rightsideBG{
float:right;
background:silver;
width:300px;
border: 3px dotted silver; /*temporary css*/
}
#leftsideBG{
float:left;
background:gold;
width:100px;
margin-left:-100px;
border: 3px dotted gold; /*temporary css*/
}
#overbothsides{
float:left;
width:400px;
border: 3px dotted black; /*temporary css*/
}
</style>
</head>
<body>
<div id="rightsideBG">
<div id="leftsideBG">
<div id="overbothsides">
this content spans over both columns now.
</div>
</div>
</div>
</body>
</html>
== ステップ 4 ==
コンテンツを追加します。この例では、レイアウトの上に配置された 2 つの div を配置します。点線の枠線も取り除きました。プレスト、それだけです。必要に応じて、このコードを使用できます。
<!DOCTYPE HTML>
<html>
<head>
<style>
#rightsideBG{
float:right;
background:silver;
width:300px;
}
#leftsideBG{
float:left;
background:gold;
width:100px;
margin-left:-100px;
}
#overbothsides{
float:left;
width:400px;
}
#leftcol{
float:left;
width:80px;
padding: 10px;
}
#rightcol{
float:left;
width:280px;
padding: 10px;
}
</style>
</head>
<body>
<div id="rightsideBG">
<div id="leftsideBG">
<div id="overbothsides">
<div id="leftcol">left column content</div>
<div id="rightcol">right column content</div>
</div>
</div>
</div>
</body>
</html>
== ステップ 5 ==
より良いものにするために、デザイン全体をラップ div の中央に配置し、角を丸くすることができます。丸みを帯びた角は、特別な修正を使用しない限り、古い IE では表示されません。
<!DOCTYPE HTML>
<html>
<head>
<style>
#wrap{
position:relative;
width:500px;
margin:20px auto;
-webkit-border-bottom-right-radius: 20px;
-moz-border-radius-bottomright: 20px;
border-bottom-right-radius: 20px;
}
#rightsideBG{
float:right;
background:silver;
width:300px;
}
#leftsideBG{
float:left;
background:gold;
width:100px;
margin-left:-100px;
}
#overbothsides{
float:left;
width:400px;
}
#leftcol{
float:left;
width:80px;
padding: 10px;
}
#rightcol{
float:left;
width:280px;
padding: 10px;
}
</style>
</head>
<body>
<div id="wrap">
<div id="rightsideBG">
<div id="leftsideBG">
<div id="overbothsides">
<div id="leftcol">left column content</div>
<div id="rightcol">right column content</div>
</div>
</div>
</div>
</div>
</body>
</html>
== インスピレーションの源 ==