字段集不遵循其父级的高度
我已经尝试解决这个问题有一段时间了,找不到解决方案。
这是我的代码
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
的高度应等于其所在子 div
的 height
。
我该怎么做?
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 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(2)
当声明父母的身高时,以百分比形式显示的身高有效。在您的例子中,
height:inherit;
但它没有从名为.parent
的父级继承任何东西。在.parent
上设置height
可以修复此问题。 (或者,您可以将名为.child
的子项的height
设置为inherit
以外的值。)http://jsfiddle.net/HtAJw/
HTML:
CSS:
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
. Settingheight
on.parent
fixes it. (Alternatively, you could set theheight
of the child called.child
to something other thaninherit
.)http://jsfiddle.net/HtAJw/
HTML:
CSS:
如果您希望字段集始终占据其父 div 的整个区域,请进行设置
(根据需要修复值)。
If you want the fieldset to always take up the entire area of its parent div, then make it
(fix the values as appropriate).