字段集不遵循其父级的高度

发布于 2025-01-01 18:49:03 字数 882 浏览 0 评论 0原文

我已经尝试解决这个问题有一段时间了,找不到解决方案。

这是我的代码

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>

我希望第二个子 div 中的 fieldset 获取父级 <代码>div。因此,fieldset 的高度应等于其所在子 divheight

我该怎么做?

I have been trying to solve this problem for a while, could not find solutions.

Here is my code

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>

I want the fieldset in second child div to take the height of the parent div. So, the height of the fieldset should be equal to the height of child div it is in.

How do I do that?

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(2

路弥 2025-01-08 18:49:03

当声明父母的身高时,以百分比形式显示的身高有效。在您的例子中,height:inherit;但它没有从名为.parent的父级继承任何东西。在 .parent 上设置 height 可以修复此问题。 (或者,您可以将名为 .child 的子项的 height 设置为 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;
}

Height as a percentage works when the parent's height is declared. In your case, height: inherit; but it's inheriting nothing from it's parent called .parent. Setting height on .parent fixes it. (Alternatively, you could set the height of the child called .child to something other than 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;
}
只有影子陪我不离不弃 2025-01-08 18:49:03

如果您希望字段集始终占据其父 div 的整个区域,请进行设置

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

(根据需要修复值)。

If you want the fieldset to always take up the entire area of its parent div, then make it

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

(fix the values as appropriate).

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文