html - フィールドセットの高さは親の 100%

Question

私はfieldsetsでラップされた2 を持っています。それらを と と<div>呼びましょう。blah1blah2

blah2<div>親の最大値として成長できますがblah1、兄弟の同じ % の高さが必要ですblah2

これは私のデモです

Answer 1

答えはちょっと変でしたが、私はそれを機能させます。マージンがここで混乱しているように見えます。設定するとmargin: 0 5px;、両方を親fieldsetsと同じにすることができますheight

CSSマークアップの一部:

fieldset
{
    border: 1px solid #ddd;
    padding: 0 1.4em 1.4em 1.4em;
    margin: 0 0 1.5em 0;
    border-radius: 8px;
    margin: 0 5px;
    height: 100%;
}

legend
{
    font-size: 1.2em;
    font-weight: bold;
}
.blahContainer{
    width: 100%;
    height: 100%;
}

.blahColumna1{
    width: 70%;
    height: 100%;
}

最終的なデモを見たい場合は、ここをクリックしてください。

それが他の誰かを助けることができることを願っています...

Answer 2

高さが固定されていない<fieldset>単一のコンテナーに両方の をラップしてみてください。の高さを、含まれている の 100% に設定します。<div>blah2<div>blah1<div>

Answer 3

padding-bottomChrome専用のフィールドセットに追加することで機能させることができました。これにより、余分な高さ % のバランスが取れます。サイズを変更しても（比較的一貫して）機能するという点で優れています。

if (navigator.userAgent.toLowerCase().indexOf('chrome')) { // Replace this with your preferred way of checking userAgent
    $('fieldset').css('padding-bottom', '4%'); // Exact percent may vary
}

注記として、これは少なくとも IE8 - IE11 でも問題であることがわかったので、修正を IE に適用できます。