have nested div fill up area within parent div

Question

Been looking all over stack for answers and nothing fits my specific scenario:

I have a parent div and within that I have two child divs aligned horizontally next to each other. I want to pretty much fill up all that extra space in the parent div (shown in purple color). I want to take the div in red and pull it up and down to fill the parent so that column background is all red and similarly, the right div fills up and down and the background for that entire fills up to be blue. Below is my div structure

<div class="container">
  <div id="parent" class="btn row-height" style="width:100%; margin:0%; margin-top:5%; padding-top:10%; padding-bottom:10%; border-solid:1px; border-radius:10px; background:#d3d3e5; overflow:hidden" type="submit">
    <div class="row">
      <div class="col-height col-middle col-xs-4 pull-left card" style="background-color:red">
        <div class="col-xs-12 text-center">
          <h3 class="heading-s1">TEXT</h3>\
        </div>
      </div>
      <div class="col-height col-middle col-xs-8 pull-right card" style="background-color:blue;">
        <div class="col-xs-12 text-center">
          <h4>TEXT</h4>
          <p>TEXT</p>
        </div>
      </div>
    </div>
  </div>

</div>

To make it clearer: I want my final thing to look like this:

Check this answer https://stackoverflow.com/questions/19089384/twitter-bootstrap-3-two-columns-full-height — Suresh Ponnukalai, Nov 08 '17 at 03:45

Siya Mzam · Accepted Answer · 2017-11-08T03:59:20.250

1

I think you might be looking for something like this.

.container {
  height:500px;
}

.container #parent {
  height:100%;
}

.container #parent .row {
  height:100%;
  position: relative;
}

.container #parent .row #child-left {
  height: 100%;
  width:30%;
  background-color: blue;
  float:left;
}

.container #parent .row #child-right {
  height: 100%;
  width:70%;
  background-color: yellow;
  float: right;

}

I am not sure what styles .container, #parent and row have, so I included what could possibly be their styles. But the meat of the of the answer/solution here is the last two blocks of the styles. The idea is that both children of the parent must have 100% height of whatever is containing them.

Check demo here: https://jsfiddle.net/an6t1yj3/

In case you can't, this is the output of the fiddle:

edited Nov 08 '17 at 03:59

answered Nov 08 '17 at 03:43

Siya Mzam

4,655
1
26
44

OP don't want fixed height for the container. – Suresh Ponnukalai Nov 08 '17 at 03:44
It doesn't matter. Like I said, I am not sure what styles you have for the container. So whatever they may be, the point or the actual styles you want to make use of in that code are the last two blocks – Siya Mzam Nov 08 '17 at 03:46
So whatever the height of the container is, explicit or implicit, the last two blocks of the styles I have provided will simply make the divs assume 100% of the container, which is what you want. – Siya Mzam Nov 08 '17 at 03:48
I tried the fiddle, didn't work for me :/ I think I have a bunch of these extra styles in my divs that are breaking the structure – user3892254 Nov 08 '17 at 03:50
@user3892254 post your fiddle. It will help others to understand the problem. – Suresh Ponnukalai Nov 08 '17 at 03:53
@user3892254 where are the bunch of extra styles coming from? That fiddle I posted works unless you have added your extra styles to it.Which if is the case, then the extra styles you are provided have a problem. Please post your fiddle with the extra styles that you have added and let's have a look. – Siya Mzam Nov 08 '17 at 03:56
managed to fix it! I had styles in my parent class that were messing things up! Thank you for the help @fshock – user3892254 Nov 08 '17 at 07:44
@user3892254 Not a problem. I am glad that helped. – Siya Mzam Nov 08 '17 at 14:50

score 0 · Answer 2 · answered Nov 08 '17 at 03:27

You display: table values.

<style>
#parent {background: purple; overflow: hidden;}
.row {display: table; height: 300px; width: 100%}
.row > div {display: table-cell; text-align: center; vertical-align: middle;}
#child-left {background: red; width: 40%;}
#child-right {background: blue; width: 60%;}
</style>

<div class="container">
  <div id="parent">
    <div class="row">
      <div id="child-left" class="pull-left">left<br>left</div>
      <div id="child-right" class="pull-right">right<br>right<br>right</div>
     </div>
    <div>
 <div>

https://jsfiddle.net/mj87kucy/

have nested div fill up area within parent div

2 Answers2