Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Floated div 100% height of dynamic parent without absolute position?

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.

like image 354
sangwe11 Avatar asked Oct 16 '12 17:10

sangwe11


People also ask

How do I make my div take 100% height of parent div?

Answer: Set the 100% height for parents too And we all know that the default value of the height property is auto , so if we also set the height of <body> and <html> elements to 100%, the resulting height of the container div becomes equal the 100% height of the browser window.

How do you make a div full height of a parent?

Example 2: The second way to achieve this by using align-items property in the parent div to 'stretch'. It makes every . child-div 100% height of it's parent height.

How do you make a div fill its parent container?

The width property is used to fill a div remaining horizontal space using CSS. By setting the width to 100% it takes the whole width available of its parent. Example 1: This example use width property to fill the horizontal space. It set width to 100% to fill it completely.

What determines the height of a div?

The width of the div is by default 100% (due to display:block css) and the height vary according to the inner content. Also, the width will always remain 100% even if inner content has higher width.


1 Answers

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

like image 130
Man Hitta Avatar answered Oct 13 '22 11:10

Man Hitta