Home/ Questions/Q 7410963
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-29T06:18:49+00:00

I have been trying to solve this problem for a while, could not find

  • 0

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?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

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