Cssの列が行の高さを埋めることはありません

Question

私はここでいくつかの助けを得ることができますか？フィドルでは、私は必要なマークアップのほとんどを持っています。

http://jsfiddle.net/theDawckta/54z3J/

Iは、行の下に延びるように列1 columnItemを作成する方法を見つけ出すことができません。私が第1欄で見たいのは、黒色のコンテンツを同じサイズのままにして、赤色の行部分を緑色で塗りつぶすことです。

私はそれは不可能だと思う、幸運、私はこれを十分に持っていた。

Answer 1

あなたはcssを使って行うことはできませんが、javascriptの方法で行うことができます。 コンテンツを変更するたびにスクリプトを実行する必要があることを意味し、いつ実行するかをいつも分かりませんので、お勧めしません。

この問題が重要な場合は、テーブルを使用することをおすすめします。

Answer 2

Omer Ben-Nahumはテーブルを提案しましたが、あなたのコンテンツをどのようにマークアップするかはわかりません。実際にはCSSを使用してこの効果を達成する方法はありませんが、サイトで使用できるようにするための回避策をいくつか使用することができます。テーブルの代わりにFaux Columnsを使用してください。

Answer 3

私は実際にあなたのコードのかなりの部分をカットしていますので、余分なdivが必要な場合は事前にお詫びします（ただし後で追加するのは難しくありません）。また、IEでこれをテストしたいと思うかもしれません - 私はこのバージョンを切り詰めています（IE7 +ではうまくいくと思います）。

HTML

<div class="row"> 
<div class="column"> 
    <div class="columnItem"> 
    <p>Content</p> 
    </div> 
</div> 
<div class="column"> 
    <div class="columnItem"> 
    <p>Content</p> 
    </div> 
    <div class="columnItem"> 
    <p>Content</p> 
    </div> 
</div> 
</div> 

CSS

.row { 
overflow:hidden; 
} 
.column { 
float:left; 
width:50%; 
padding-bottom:10000px; 
margin-bottom:-10000px; 
} 

/* You can remove everything under this comment */ 
.columnItem { 
padding:10px; 
margin:5px; 
background:blue; 
} 
.column:nth-of-type(1) { 
background:yellow; 
} 
.column:nth-of-type(2) { 
background:pink; 
} 

それはそれは実際にはかなり簡単です

仕組み

。各行は、実際の内容がどこにあるかをすべて隠します（overflow:hidden;で、各列はpadding-bottom:10000px;で10,000ピクセル下に戻り、margin-bottom:-10000px;で再度バックアップします）ピクセル数は増減できます。あなたのコンテンツ

PS - 。何でも可能ですが、不可能では単に時間がかかり〜NSA

Answer 4

bfrohのソリューションは、私が前に何度か使ってきたものですが、一般的に、私は通常、次のような状況をエミュレートするための背景画像を使用します。これは（1つの部門のコンテンツがそれを十分に高くしていない）

ラッピングコンテナバックグラウンド画像は、左のdiv全体の背景色を持つことができ、それを 'repeat-y'に設定するだけです。

これらの問題を扱うのは、私の経験上、bfrohが投稿したハックやこの。

希望しました！