Question

我一直试图解决这个问题一段时间，找不到解决方案。

这是我的代码

CSS

.parent{
    width:100px;
    display:table;
    border:1px solid green;
}

.child{
    width:50px;
    background:blue;
    display:table-cell;
    height: inherit;
}

.child + .child{
    background:red;
}

HTML 的

<body>
    <div class="parent">
        <div class="child">a <br/> b<br/> b<br/> b<br/> b<br/> b<br/> b</div>
        <div class="child" style="border: 2px dashed black">
            <fieldset style="height:100%;">a</fieldset>
        </div>
    </div>
</body>

我希望第二个孩子fieldset中的div获取父div的高度。因此，fieldset的高度应该等于它所在的height个div。

我该怎么做？

Answer 1

声明父级高度时，百分比高度有效。在您的情况下，height: inherit;但它从其父级名为.parent继承 nothing 。在height上设置.parent会修复它。（或者，您可以将名为height的孩子的.child设置为inherit以外的其他内容。）

http://jsfiddle.net/HtAJw/

HTML：

<div class="parent">
    <div class="child">a <br/> b<br/> b<br/> b<br/> b<br/> b<br/> b</div>
    <div class="child" style="border: 2px dashed black">
        <fieldset style="height:100%;">a</fieldset>
    </div>
</div>

CSS：

.parent{
    width:100px;
    display:table;
    border:1px solid green;
    height: 100%   /* <-- added height to parent */
}

.child{
    width:50px;
    background:blue;
    display:table-cell;
    height: inherit;
}

.child + .child{
    background:red;
}

Answer 2

如果您希望fieldset始终占用其父div的整个区域，请将其设为

.child2 {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
}

（根据需要修复值）。

fieldset不遵循其父级的高度

2 个答案: