浮动div无绝对位置的动态父母的100％身高？

我已经在这里做了很多的阅读，并且找不到解答我的答案。浮动div无绝对位置的动态父母的100％身高？

我有一个容器div，有多个浮动的左divs，根据下面的html。

<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>

我的问题是.catbg0不具有特定高度，.catb2的内容把它推到它的高度，并作为内容可以改变我不能设置一个特定的高度。我想让.catb类的其余部分达到.catbg0类的100％高度，但设置高度为100％;不起作用。

下面是与上述相关的CSS。

.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;}

任何想法？谢谢。

来源

2012-10-16 sangwe11

欢迎来到SO！如果你也包含相关的CSS，这将更容易回答。 – JcFx

因为我知道只有块位置：绝对可能是100％身高和它的孩子。

如果您确信.catb2具有.catb的最大高度*尝试添加包装：

<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 */ }

附：也许它会对你有用 - A new micro clearfix hack

来源

2012-10-16 20:01:49

这似乎工作正常，除了.catb2 div现在隐藏在浮动div的其余部分之后？如果我添加.catb1 {margin-right：52％（.catbg2的宽度）}然而，它工作正常吗？这是因为我没有正确更改<！ - margin == catb2 width - >部分？ – sangwe11

是的，您可以添加.catb1 {margin-right：52％;}或.catb3 {margin-left：52％}。这并不重要 –

这里是一个jsfiddle的例子：https://jsfiddle.net/f14p9kzL/我也不想使用绝对位置，但没有尝试工作，这真的是最好的解决方案 – Francisc0

我不太确定。但给容器（catbg0）溢出：隐藏;可能工作。通常，它所做的是扩展它应用于的div（未设置特定高度时）。

注意：它仍然是一个溢出，长词等等和divs将继续进行，因为溢出掩盖div。

来源

2012-10-16 17:41:38 CaptainCarl

添加了相关的CSS。另外，我试图解决的问题是无法伸缩容器div，clearboth元素会这样做，它将.catb1，.catb3，.catb4，.catb5伸展到任何高度.catb2也伸展.catb0。 – sangwe11

浮动div无绝对位置的动态父母的100％身高？

回答

相关问题