html - 別の div の 100% の高さを埋める div を取得する方法

Question

http://jsfiddle.net/eDYDD/

上記は、私がやろうとしていることを主に説明する jsfiddle です。#main_infoの 100% の高さを で埋めることができないようです#main。そのため、境界線は div の 100% を埋め、見栄えがよくなります。どんな助けでも大歓迎です。

Answer 1

絶対配置を使用します。

#main {
    position: relative;
}
#main_info {
height: 100%;
    position: absolute;
}

http://jsfiddle.net/eDYDD/3/

Answer 2

Cross-Browser CSS を使用した Equal Height Columns をご覧ください。

CSS で同じ高さの列を作成することは、最初に思われるほど簡単ではありません。このチュートリアルでは、複数の列のレイアウトで発生する表示の問題に焦点を当て、すべての一般的な Web ブラウザーで機能する簡単な解決策を示します。ここに示す方法は、100% CSS ハックフリー、画像フリー、JavaScript フリーであるため、最も厳密にコード化された Web サイトでも使用できます。

Answer 3

あなたのjsfiddleを変更しました。min-height他の答えは、親要素のプロパティを継承するという最も簡単な解決策を見逃しています。

#main_info {
    width: 20%;
    min-height: inherit;
    border-right: 1px solid #E4E4E4;
}

Answer 4

CSS では、親の高さが固定されていない限り、巧妙な工夫をしなければ、子の高さを 100% 満たすことはできません。

1. 表示テーブルを使用して、要素をテーブルのように動作させ、子が親を埋めるようにすることができます。
2. 背景画像を使用して、ケースの境界線が親要素によって視覚的に管理されるようにすることができます。
3. JavaScript を使用して、2 つの要素の外観を維持できます。

これらのどれがあなたに当てはまるかは、ユースケースによって異なります。この時点では、アバター情報は単なる境界線なので、視覚的な境界線を作成するの#main_infoがおそらく最も簡単な方法です。

テーブルベースのレイアウトを使用すると、これもうまく解決されますが、table要素、row要素、および要素があることを確認するには、追加のマークアップが必要になりcellます。