CODEWITHSUNDEEP
csslayouthtml
IamaC
IamaC

Reputation: 377

fieldset does not follow its parent's 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?

Upvotes: 3

Views: 6375

Answers (2)

Sparky
Sparky

Reputation: 98738

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

Upvotes: 2

Alexander Pavlov
Alexander Pavlov

Reputation: 32296

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

Upvotes: 1

Related Questions