Fieldset height 100% of its parent

Question

I have 2 fieldsets wrapped in a <div> , let's call them blah1 and blah2 .

blah2 can grow as the max of its <div> parent, but I need blah1 to have the same % height of his sibling blah2

This is my demo

Answer 1

The answer was kinda weird, but I make it work, looks like the margin was making a mess here, if I set it to margin: 0 5px; then I can make both fieldsets to have the same height as their parent

Part of the css markup:

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%;
}

If you wanna see the final demo, click here .

Hope it can help somebody else...

Answer 2

Try wrapping both <fieldset> s in a single container <div> that isn't fixed height -- it will neatly enclose blah2 , and will grow up to the max size of your <div> parent. Set blah1 's height to be 100% of the containing <div> .

Answer 3

I was able to get it working by adding padding-bottom to the fieldset for Chrome only. This balances out some of the extra height %. It's nice in that it works (relatively consistently) even when resizing.

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

Just as a note, I found this to be an issue in at least IE8 - IE11 as well, so the fix can be applied to IE.