How to make child div expand to parent div

Question

Hi i am having trouble trying to get my child div expand to the height of the parent div that it is inside of.

Here is the css for the parent div

#wrapper #content {
    border: 1px ridge #999;
    height: auto;
    min-height: 1000px;
    width: 1100px;
    margin-top: 40px;
    margin-right: auto;
    margin-bottom: 30px;
    margin-left: auto;
    float: left;
}

And here is the css for the child div

.tab_container {
    clear: both;
    width: 100%;
    border-right: 1px ridge #999;
    margin-bottom: 20px;
    height: 100%;
}

Any ideas what i can do?

score 3 · Answer 1 · edited May 23 '17 at 10:29

You can do it with the folowing style: (Inspired by this question: CSS - Expand float child DIV height to parent's height)

#content {
    border: 1px ridge #999;
    height: auto;
    min-height: 1000px;
    width: 1100px;
    margin-top: 40px;
    margin-right: auto;
    margin-bottom: 30px;
    margin-left: auto;
    float: left;
    position: relative; /* added */
    width: 100%; /* added */
}

.tab_container {
    border: 1px ridge orange; /* added */
    clear: both;
    width: 100%;
    border-right: 1px ridge #999;
    margin-bottom: 20px;
    height: 100%;
    position: absolute; /* added */
}

Fiddle here

score 0 · Answer 2 · answered Nov 13 '11 at 17:23

0

You have margin-bottom set on both elements. With the child having a bottom margin, it will always be smaller by that amount. Removing the margin-bottom style might bring it a little closer.

answered Nov 13 '11 at 17:23

Joel Etherton

37,325
10
89
104

score -1 · Answer 3 · answered Nov 13 '11 at 17:20

The height of the parent is auto. The 100% of the child results in it also being defined as auto, and auto results in size to content.

You can try adding a fixed height to the parent which might work or put enough content in the child to stretch it; that will work.

score -1 · Accepted Answer · answered Nov 13 '11 at 17:30

You can do it with jQuery. Please check the example code below.

<html>
<head>
<title>Auto Height in jQuery</title>
<script type="text/javascript" src="jquery-1.6.2.min.js"></script>
<script type="text/javascript">
$(function(){
    var height = $("#content").height();
    $(".tab_container").height(height);
});
</script>
<style type="text/css">
#wrapper #content {
    border: 1px ridge #999;
    height: auto;
    min-height: 1000px;
    width: 1100px;
    margin-top: 40px;
    margin-right: auto;
    margin-bottom: 30px;
    margin-left: auto;
    float: left;
}
.tab_container {
    clear: both;
    width: 100%;
    border-right: 1px ridge #999;
    height: 100%;
    border: 1px solid green;
}
</style>
</head>
<body>
<div id="wrapper">
    <div id="content">
        <div class="tab_container">Tab Container</div>
    </div>
</div>
</body>
</html>

Thankyou, this method worked perfectly, for some reason though it adjusted the div above aswell, not sure why but i managed to adjust it to fit, so thanks a lot for the help — Alistair Wise, Nov 13 '11 at 18:01
If you found answers are useful, you can vote up or even can choose the right answer by clicking the correct mark. — Thein Hla Maw, Nov 13 '11 at 18:32

How to make child div expand to parent div

4 Answers4