Fieldset height 100% of its parent

Question

I have 2 fieldsets wrapped in a

, let\'s call them blah1 and blah2.

blah2 can grow as the ma

Answer 1

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.