web-dev-qa-db-ja.com

親の残りのスペースをdivで埋めるようにします

Divの配置についてサポートが必要です。 HTMLの構造は次のとおりです。

<div class="container">
    <div class="item">
        <div class="left">
            lorem lorem
        </div>
        <div class="right">
            <p>right</p>
            <p class="bottom">bottom</p>
        </div>
    </div>
</div>

そして私は次のCSSを持っています：

.container {
    float: left;
    padding: 15px;
    width: 600px;
}
.item {
    float: left;
    padding: 15px;
    width: 570px;
}
.left {
    float: left;
    padding: 40px 20px;
    margin-right: 10px;
}
.right {
    position: relative;
    float: left;
}
.bottom {
    position: absolute;
    bottom: 0;
}

左のdivの幅と高さは動的です。

私が達成したいのは：

  1. 右のdivの高さを左のdivの高さと同じにします。
  2. 右側のdivの幅を、divの残りの部分をクラスitemで埋めるようにします。
  3. クラスbottomの段落は、右側のdivの下部にある必要があります。

これが私の目標を表す簡単な画像です： enter image description here

そして JSFiddleデモ へのリンク。

htmlcsslayoutcss-float
13
user1292810

.bottomの正しい位置と幅を取得することは、クロスブラウザーのCSSソリューションにとって最大のハードルのようです。

オプション

1。フロート

@joeellisが示したように、柔軟な幅は、左側の列のみをフローティングし、右側の列にoverflow:hiddenを適用することで実現できます。

.bottomの位置は、どのブラウザでも実現できません。等しい、可変の高さの浮動列に対するCSSソリューションはありません。絶対に配置された.bottom要素は、100％の幅で正しいサイズになるように、右側の列divの内側にある必要があります。ただし、右の列は必ずしも左の列と同じ高さになるとは限らないため、.bottomをbottom:0と一緒に配置しても、必ずしもコンテナの下部に配置されるとは限りません。

2。 HTMLテーブルとCSSテーブル

柔軟な幅は、左側のセルに1pxの幅を与え、右側のセルの幅を指定しないことで実現できます。両方のセルは、コンテンツに合うように成長します。余分なスペースは、右側のセルだけに追加されます。

.bottomが右側のテーブルセル内にある場合、Firefoxではその位置に到達できません。 Firefoxのテーブルセルでは、相対位置は影響しません。絶対位置と100％の幅は、右側のテーブルセルを基準にしません。

.bottomが右側の列の個別のテーブルセルとして扱われる場合、Firefox以外のブラウザでは、右側と下部のテーブルセルの正しい高さを実現できません。テーブルセルの高さは、幅と同じように柔軟ではありません（Firefoxを除く）。

3。 CSS3 flexboxおよびCSS3グリッド

Flexboxとグリッドは、近い将来の有望なレイアウトツールです。ただし、flexboxはIE9以前ではサポートされておらず、グリッドはIE10以外のブラウザーではサポートされていません。どちらかがこのレイアウトを実現できるかどうかはテストされていませんが、ブラウザーのサポートにより妨げられる可能性があります現在のオプションから。

概要

  • フロートはどのブラウザにもソリューションを提供しません。
  • HTMLテーブルと CSSテーブル クロスブラウザソリューションを提供していません。
  • Flexbox は IE9以前 の潜在的な解決策を提供しません（そして他のブラウザに解決策を提供する場合と提供しない場合があります）。
  • Grids は IE1 の潜在的な解決策のみを提供します（そしてそこで解決策を提供する場合と提供しない場合があります）。

結論

現在、適切なCSSソリューションはないようです。これは、flexbox（IE9以前のサポートが必要ない場合）を除いて、十分な関連ブラウザで機能するソリューションです）。 。

jQuery

これは、jQueryを使用して列を同じ高さに強制するいくつかの変更されたデモです。両方のデモのCSSとjQueryは同じです。 HTMLは、左右の列にあるコンテンツの量によってのみ異なります。どちらのデモも、すべてのブラウザで正常にテストされました。同じ基本的なアプローチをプレーンJavaScriptに使用できます。

簡単にするために、左右のdivの内部パディングを子要素（.content）に移動しました。

10
Matt Coughlin

同じ高さで同じ行にとどまる兄弟要素は、それらをtable-cellとして表示し、親をdisplay: tableとして表示することで実現できます。
作業中のフィドル： http://jsfiddle.net/SgubR/2/ （フローティング要素に沿ってoverflow: hiddenも表示されます列を作成するためのテクニック。後者には明確な修正が必要です）

CSSのテーブルセルは任意のHTML要素（section、div、span、liなど）を使用し、そのセマンティクスはテーブルレイアウトに使用されるtable、tr、およびtd要素とは無関係です（視覚的な結果が同じであることを除いて、それが何です）欲しい）。

  • display: tableは親に設定されています
  • display: table-rowは中間の要素で使用できますが、それがなくても機能する場合は問題ありません
  • display: table-cellは各子に設定されます
  • 幅は、これらの「セル」なし、一部、またはすべてに設定されます。ブラウザは、コンテンツと設定された幅の両方に適応して、それらの幅（および明らかに親の合計幅）を計算します
  • table-layout: fixedは、ブラウザにotherテーブルレイアウトアルゴリズムに切り替えるように指示します。ここでは、コンテンツの量は気にせず、CSSで設定された幅のみに切り替えます。
  • ほとんどの場合、vertical-align: topが必要になります（ただし、複雑なレイアウトに最適な他の値を設定することもできます）
  • マージンは「セル」には適用されず、パディングのみが適用されます。マージンはテーブル自体にのみ適用されます。 border-collapse: separateおよび/またはborder-spacing: 4px 6pxで「セル」を区切ることはできますが

互換性：IE8 +
必要に応じてIE6/7のフォールバックは、インラインブロックの場合とまったく同じです。

以前の回答でのより長い説明：ここおよびそこ古き良き方法faux-columns（この手法を念頭に置いて設計を検討する必要があります）

9
FelipeAls

右の列にoveflowを追加するだけで、フロートしないでください。

.right {
  position: relative;
  overflow: hidden;
}

これにより、rightが残りの幅を埋めるようになります。

2
pzin

このようなものが機能する可能性があります：

http://jsfiddle.net/PCvy9/2/

あなたが探しているものの主な鍵は次のとおりです。

 .right {
   overflow: hidden;
   background-color: #C82927;
 }

これは、「ブロックフォーマットコンテキスト」と呼ばれるものが原因です。ここでの理由に関する優れた推論とチュートリアル： http://colinaarts.com/articles/the-magic-of-overflow-hidden/#making-room-for-floats

ただし、それらの高さは完全にはリンクされていません。この例では、左側のブロックの高さを手動で設定する必要があります（フロートコンテナであるため）

1
joeellis