浮动div动态父亲的100%高度,没有绝对位置? [英] Floated div 100% height of dynamic parent without absolute position?
问题描述
我有一个容器div,有多个浮动的左div,
< div class =catbg0id =b1>
< div class =catb1>#< / div>
< div class =catb2>板名< / div>
< div class =catb3>主题< / div>
< div class =catb4>帖子< / div>
< div class =catb5>最后发布< / div>
< div class =clearboth>< / div>
< / div>
我的问题是.catbg0没有特定高度,.catb2的内容将其下推到其高度,并且作为内容可以变化,我不能设置特定的高度。我想要其余的.catb类去到.catbg0类的100%高度,但设置高度:100%;
以下是与上述相关的CSS。
.catb1 {float:left;宽度:9%;高度:100%; min-height:100%;}
.catb2 {float:left;宽度:52%;高度:100%; min-height:100%;}
.catb3 {float:left;宽度:8%;高度:100%; min-height:100%;}
.catb4 {float:left;宽度:8%;高度:100%; min-height:100%;}
.catb5 {float:left;宽度:23%;高度:100%; min-height:100%;}
.clearboth {clear:both; height:0; width:0; margin:0; padding:0;}
感谢。
因为我知道只有block的位置:absolute可能是100%
如果您确定.catb2的最大高度为.catb *,请尝试添加wrapper:
< div class =catbg0id =b1>
< div class =catb2>板名< / div>
< div class =wrapper>
< div class =catb1>#< / div>
<! - margin == catb2 width - >
< div class =catb3>主题< / div>
< div class =catb4>帖子< / div>
< div class =catb5>最后发布< / div>
< / div>
< div class =clearboth>< / div>
< / div>
CSS
.catbg0 {position:relative; }
.wrapper {position:absolute; width:100%;高度:100%; }
.catb2 {margin-left:/ * catb1 width here * /}
也许这将是对您有用 - 新的micro clearfix hack
I've done alot of reading on here, and cannot find a solution to my answer.
I have a container div, with multiple floated left divs, as per the html below.
<div class="catbg0" id="b1">
<div class="catb1">#</div>
<div class="catb2">Board Name</div>
<div class="catb3">Topics</div>
<div class="catb4">Posts</div>
<div class="catb5">Last Post</div>
<div class="clearboth"></div>
</div>
My problem is that .catbg0 does not have a specific height, the content of .catb2 pushes it down to its height, and as the content can vary I cant set a specific height. I want the rest of the .catb classes to go to 100% height of the .catbg0 class, but setting height: 100%; does not work.
Below is the CSS that relates to the above.
.catb1 {float: left; width: 9%; height: 100%; min-height: 100%;}
.catb2 {float: left; width: 52%; height: 100%; min-height: 100%;}
.catb3 {float: left; width: 8%; height: 100%; min-height: 100%;}
.catb4 {float: left; width: 8%; height: 100%; min-height: 100%;}
.catb5 {float: left; width: 23%; height: 100%; min-height: 100%;}
.clearboth {clear: both; height:0; width: 0; margin: 0; padding: 0;}
Any ideas? Thanks.
As I know only block with position:absolute may be 100% height and its children too.
If you sure that .catb2 has the biggest height of .catb* try to add wrapper:
<div class="catbg0" id="b1">
<div class="catb2">Board Name</div>
<div class="wrapper">
<div class="catb1">#</div>
<!-- margin == catb2 width -->
<div class="catb3">Topics</div>
<div class="catb4">Posts</div>
<div class="catb5">Last Post</div>
</div>
<div class="clearboth"></div>
</div>
CSS
.catbg0 { position: relative; }
.wrapper { position: absolute; width: 100%; height: 100%; }
.catb2 { margin-left: /* catb1 width here */ }
P.S. Maybe it'll be usefull for you - A new micro clearfix hack
这篇关于浮动div动态父亲的100%高度,没有绝对位置?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!