b11 b11 -4 years ago 177
CSS Question

How to set child div border to parent div height

As you may see in this JSfiddle https://jsfiddle.net/m4qLqppd/, the border height of each "part" is different and does not cover the entire row. It is set to whatever height that particular is and not the height of the parent.

Is there anyway I can get it to always be the height of the parent row "info" without setting a fixed height? I do not want a fixed height because the height of the parent will vary.

I tried setting the height of each part to

height: 100%

but this does not do it.

Answer Source

See this fiddle

For the % height to work, you will have to set the height of all the parent elements also in %, ie you have to specify the height for both html and body in % too. Thus in your code, you will have to add height:100% to html,body in your CSS.

The updated CSS would be as follows



See the updated fiddle with all the children occupy full height of the parent. In the updated fiddle, I've added a class named full-width, which has a height 100%, to all the parent elements.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download