Make nested div stretch to parent height

Question

Well basically I'm creating some forums, and for example we're looking at a thread and the user information is on the left, and the content of the thread is on the right, and then under is the user's signature.

Now, I'm trying to get the user information on the left to stretch down to the height of its container...

http://prntscr.com/7dbdww

.topic {
    width: 100%;
    display: inline-block;
    border: 1px solid #444;
    margin-bottom: 20px;
    position: relative;
}
.topic-header {
    width: 100%;
    height: 40px;
    display: block;
    background-color: #CD422B;
    border-left: 1px solid #CD422B;
    border-right: 1px solid #CD422B;
}
.topic-header h4 {
    color: #fff;
    font-family: 'Titillium Web', sans-serif;
    font-size: 18px;
    font-weight: 700;
    padding-left: 10px;
    line-height: 40px;
    margin: 0;
}
.topic-userinfo {
    width: 20%;
    min-height: 200px;
    display: inline-block;
    position: relative;
    float: left;
    left: 0;
    background-color: #555;
    color: #fff;
    font-family: Helvetica, Arial, sans-serif;
    font-size: 15px;
    font-weight: bold;
}
.topic-usersig {
    width: 80%;
    height: 150px;
    max-height: 300px;
    display: inline-block;
    overflow-y: auto;
    position: relative;
    float: right;
    right: 0;
    background-color: #323232;
    border-top: 1px dashed #444;
}
.topic-body {
    width: 80%;
    min-height: 200px;
    display: inline-block;
    position: relative;
    float: right;
    right: 0;
    background-color: #323232;
    color: #fff;
}

That's css ^ here's html

<div class="topic">
    <div class="topic-header">
        <h4><i class="fa fa-fw fa-comment"></i> Test</h4>
    </div>
    <div class="topic-userinfo">
        <div class="userinfo-box">
            <center>
                <span class="userinfo-name admin-color">
                    <a href="http://www.skruffysdeveloper.com/users/index.php?username=deaL">deaL</a>
                </span>
                <span class="userinfo-rank">
                    Administrator
                </span>
                <img src="http://www.skruffysdeveloper.com/assets/img/user_img_default.png" style="border: 1px solid #333; width: 90px; height: 90px;">
            </center>
        </div>
        <center>
            Joel Evans
        </center>
    </div>
    <div class="topic-body">
        <div class="topic-content">test2</div>
    </div>
    <div class="topic-usersig">
        <div style="margin: 10px"></div>
    </div>
</div>

Answer 1

Just setting the height alone to 100% didn't work for me. I also changed the position to absolute for that div.

CSS

.topic-userinfo {
    width: 20%;
    height: 100%;
    display: inline-block;
    position: absolute;
    float: left;
    left: 0;
    background-color: #555;
    color: #fff;
    font-family: Helvetica, Arial, sans-serif;
    font-size: 15px;
    font-weight: bold;
}

JSFiddle

Answer 2

use these css for parent

.parent {
overflow: hidden;
position: relative;
width: 100%;
      }

use these css for child

 .child {
background:blue;
height: 100%;
width: 50%;
position: absolute;
right: 0;
top: 0;
}

Answer 3

Use height:100%

.topic-userinfo {
    width: 20%;
    min-height: 200px;
    display: inline-block;
    height:100%;
    position: relative;
    float: left;
    background-color: #555;
    color: #fff;
    font-family: Helvetica, Arial, sans-serif;
    font-size: 15px;
    font-weight: bold;
}

Answer 4

Marks Answer is almost perfect, except that it stretches a bit to far because of the header. If we offset for the header, it's perfect.

.topic-userinfo {
    width: 20%;
    height: calc(100% - 40px);
    display: inline-block;
    position: absolute;
    float: left;
    left: 0;
    background-color: #555;
    color: #fff;
    font-family: Helvetica, Arial, sans-serif;
    font-size: 15px;
    font-weight: bold;
}

https://jsfiddle.net/1pntme1x/1/

Answer 5

The main issue at hand is that you need the left-floated child .topic-user-info to take 100% height of the parent. But the parent's height is auto by default, meaning it will adjust its height to fit the children. And that is why simply putting height:100% on the floated left child won't work.

The solution is to absolutely position the left child, and float the thread content and signature to the right. If your markup is done properly, it becomes very easy to do. I personally think the HTML is pretty poor - non-semantic tags, use of deprecated tag <center> , plenty of inline styles. The best thing to do would actually be to rewrite them.

 * { box-sizing: border-box; } .topic { width: 100%; display: inline-block; border: 1px solid #444; margin-bottom: 20px; position: relative; } .topic-header { display: block; width: 100%; height: 40px; background-color: #CD422B; border-left: 1px solid #CD422B; border-right: 1px solid #CD422B; } .topic-header h4 { color: #fff; font-family: 'Titillium Web', sans-serif; font-size: 18px; font-weight: 700; padding-left: 10px; line-height: 40px; margin: 0; } .topic-user-info { position: absolute; padding: 0 10px; height: calc(100% - 40px); width: 20%; min-width: 130px; background-color: #555; color: #fff; font-family: Helvetica, Arial, sans-serif; font-size: 15px; font-weight: bold; text-align: center; } .topic-user-info > .public-profile { position: relative; margin: 10px auto; background-color: #fff; } .topic-user-info > .public-profile > .screen-name { color: red; } .topic-user-info > .public-profile > .rank { color: #000; } .topic-user-info > .public-profile > .avatar { width: 90px; height: 90px; border: 1px solid #333; } .topic-body { float: right; width: 80%; min-height: 500px; background-color: #323232; color: #fff; font-family: Helvetica, Arial, sans-serif; font-size: 15px; font-weight: bold; } .topic-content { padding: 20px; min-height: 200px; } .topic-usersig { padding: 20px; height: 150px; max-height: 300px; background-color: #323232; border-top: 1px dashed #444; } 

 <article class="topic"> <header class="topic-header"> <h4>Test</h4> <!-- maybe other things in header --> </header> <section class="topic-user-info"> <article class="public-profile"> <div class="screen-name">deaL</div> <div class="rank">Administrator</div> <img class="avatar" src="http://www.skruffysdeveloper.com/assets/img/user_img_default.png" alt="" /> </article> <div class="user-real-name">Joel Evans</div> </section> <section class="topic-body"> <section class="topic-content"> <h3>Test2</h3> </section> <section class="topic-usersig"> Some signature here </section> </section> </article> 

Answer 6

Some serious issues with this code, and most of the answers as well:

• The <center> tag has been deprecated for a very, very long time. Use the CSS text-align property.

• Using float: right / left and display: inline-block together doesn't make sense. The computed value of display will be block , regardless .

• Using float and then position: absolute also makes no sense. The computed value of float will be none .

• Using display: inline-block on elements that are clearly intended as block level elements.

• Percentage width on a sidebar that contains elements with a fixed width. That won't scale down nicely.

• Rogue inline styles.

Your CSS is muddled, because your markup is structured poorly. By balancing your markup and styles, you can achieve the intended look without so much hacking about on either side. Sometimes more is less.

Here's a simple example where the .topic-user-info will always match the height of the .topic-message and .topic-signature elements combined. No floats, only one position: absolute , and some nice, semantic markup.

DEMO

 .topic { width: 100%; border: 1px solid #444; } .topic-header { width: 100%; height: 40px; background-color: #CD422B; } .topic-content { padding-left: 180px; position: relative; box-sizing: border-box; width: 100%; color: white; } .topic-user-info { position: absolute; width: 180px; height: 100%; left: 0; background-color: #444; text-align: center; } .topic-body { width: 100%; background-color: #323232; } .topic-message, .topic-signature { padding: 10px; box-sizing: border-box; } .topic-message { min-height: 180px; } .topic-signature { min-height: 120px; border-top: 1px dashed #444; } 

 <div class="topic"> <header class="topic-header">Header</header> <section class="topic-content"> <div class="topic-user-info">User Info</div> <article class="topic-body"> <div class="topic-message"> <p>Message</p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sed et deleniti rem, odio sit perspiciatis quasi dignissimos repellat inventore sequi cupiditate vel quam, asperiores nisi magni, quaerat at autem id dolorem! Dolor, nobis! Fuga nisi aut deserunt in delectus nam quidem ea asperiores, animi nihil. Delectus, ab nisi. Possimus, laborum quos impedit atque eius ex ab enim a amet omnis ullam totam facere sed necessitatibus aut nihil reprehenderit sequi optio doloremque rerum voluptatum ea adipisci minus, molestias modi. Numquam iste, ducimus consequatur deleniti dolores explicabo. Doloremque odio placeat deleniti ipsam consequatur beatae eius doloribus reiciendis ut sit unde distinctio modi voluptates expedita sint ad, earum asperiores aliquid est architecto autem in, quibusdam officiis! Distinctio, eos quaerat, id illum aliquam aut.</p> </div> <aside class="topic-signature"> <p>Signature</p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corrupti delectus laudantium minima magni temporibus distinctio, aut modi saepe deserunt praesentium eligendi qui quod, ratione omnis exercitationem officiis repellendus adipisci eum molestias vitae, sed. Atque dicta in veniam ducimus voluptatem quasi accusantium, temporibus esse, aliquid itaque explicabo omnis, delectus expedita rem.</p> </aside> </article> </section> </div> 

Answer 7

height 100% some times doesn't seem to work as it should . We can use a small Js function to handle this.

We have added same class 'EqHeightDiv' to both the divs which we want to have same heights. then add following code in document ready js .

function equalHeight(group) {
    var tallest = 0;
    group.each(function() {
        var thisHeight = $(this).height();
        if(thisHeight > tallest) {
            tallest = thisHeight;
        }
    });
    group.height(tallest);
}
  equalHeight($(".EqHeightDiv"));

the Function will return the height of tallest div from the two divs and append that height to the shorter div.