html - 字段集高度为其父级的 100%

Question

我有 2 个fieldsets包裹在 a 中<div>，我们称它们为blah1and blah2。

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

尝试将两个 s 包装在一个不固定高度<fieldset>的单个容器中——它会整齐地包围 s ，并且会长大到你父母的最大尺寸。将的高度设置为包含的 100% 。<div>blah2<div>blah1<div>

Answer 3

我只能通过添加padding-bottom到 Chrome 的字段集来使其工作。这平衡了一些额外的高度％。很好的是，即使在调整大小时它也能正常工作（相对一致）。

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。