web-dev-qa-db-ja.com

純粋なCSSで同じ高さの列を作成する方法

Divをずっと下に到達させる方法は？親divの垂直方向のスペースを埋めるにはどうすればよいですか？背景画像を使用せずに同じ長さの列を取得するにはどうすればよいですか？

私は2日間かけてコードをグーグルで分析し、同じ長さの列をできるだけ簡単かつ効率的に実現する方法を理解しました。これが私が思いついた答えであり、この知識をコミュニティのコピーアンドペーストスタイルと小さなチュートリアルで共有したいと思いました。

これが重複だと思う人にとっては、そうではありません。その中のいくつかのウェブサイトに触発されました http://matthewjamestaylor.com/blog/equal-height-columns-cross-browser-css-no-hacks 以下のコードはユニークです。

csscss-floathtmlmultiple-columns
13
Paul

最新のWebデザインで注意が必要なことの1つは、すべての列の高さが等しい2つ（またはそれ以上）の列レイアウトを作成することです。私は純粋なCSSでこれを行う方法を見つけるための探求に着手しました。

これは、両方の列（またはページの背景）を保持するwrap-divで背景画像を使用することにより、最も簡単に実現できます。

CSSテーブルセルを使用してこれを行うこともできますが、残念ながら、これに対するブラウザーのサポートは依然として不審なので、推奨されるソリューションではありません。読んでください、もっと良い方法があります。

丸みを帯びた角と正確な幅またはパーセントレイアウトを使用する自由度が高く、編集が簡単なので、Web上の2つのページからインスピレーションを得ました負の数の処理を実行します。

==トリック：==

最初に背景デザイン列を作成し、次に通常のコンテンツを保持できる全幅のdivを配置します。トリックは、列内のフローティング列に関するすべてであり、コンテンツが長さを伸ばすと、どの終了列が最も長くても、すべての親列にプッシュ効果を作成します。

この例では、角が丸い中央揃えのラップ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内：すべての列のwithを組み合わせた背景なしの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>

==インスピレーションソース==

7
Paul

より簡単な解決策として、親にdisplay: tableとその子display: table-cell、 このような：

.parent {
  display: table;
}
.child {
  display: table-cell;
}

[〜＃〜] demo [〜＃〜] を参照してください。

これはIE7では機能しないため、IE7のサポートが必要な場合は、より複雑なソリューションが必要になることに注意してください。

25
zakangelle