How to fill parent height?

Question

Here is my code:

.solid_color{
  background-color: gray;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div>
  <div class="solid_color col-xs-3"></div>
  <div class="col-xs-9">
      " <span>A sentence from someone A sentence from someone A sentence from someone A sentence from someone A sentence from someone A sentence from someone A sentence from someone A sentence from someone A sentence from someone A sentence from someone</span> "
      <i>(Quote from someone)</i>
  </div>
</div>

Currently div.solid_color is a line. It should have a height the same as neighbor element's height. How can I do that?

Possible duplicate of [Make a div fill the height of the remaining screen space](https://stackoverflow.com/questions/90178/make-a-div-fill-the-height-of-the-remaining-screen-space) and a multitude of same answers found by searching SO. — Rob, Oct 28 '17 at 13:44
@RacilHilan Well I cannot define any specific height for the parent, since the length of that sentence is dynamic. — stack, Oct 28 '17 at 13:44
Possible duplicate of [How do I keep two divs that are side by side the same height?](https://stackoverflow.com/questions/2997767/how-do-i-keep-two-divs-that-are-side-by-side-the-same-height) — Phani Kumar M, Oct 28 '17 at 13:47
Note that to use bootstrap you are missing a wrapping div with container class, and for each row a div with the "row" class (around the col-xx-n divs) . — Juan, Oct 28 '17 at 13:51

VXp · Answer 1 · 2018-09-17T21:28:19.847

You can do it with the Flexbox:

.parent {
  display: flex;
  /* reason: "align-items: stretch" which makes flex-items of equal height by default, obviously they all take the height of the "tallest" one */
}

.solid_color {
  background-color: gray;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<div class="parent">
  <div class="solid_color col-xs-3"></div>
  <div class="col-xs-9">
    " <span>A sentence from someone A sentence from someone A sentence from someone A sentence from someone A sentence from someone A sentence from someone A sentence from someone A sentence from someone A sentence from someone A sentence from someone</span> "
    <i>(Quote from someone)</i>
  </div>
</div>

score 1 · Answer 2 · answered Oct 28 '17 at 13:42

You could do this via JS just with selectors and finding the desired height with getBoundingClientRect.

var height = document.querySelector('.col-xs-9').getBoundingClientRect().height;
document.querySelector('.solid_color').style.height = height + 'px';

.solid_color{
  background-color: gray;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div>
  <div class="solid_color col-xs-3"></div>
  <div class="col-xs-9">
      " <span>A sentence from someone A sentence from someone A sentence from someone A sentence from someone A sentence from someone A sentence from someone A sentence from someone A sentence from someone A sentence from someone A sentence from someone</span> "
      <i>(Quote from someone)</i>
  </div>
</div>

The result is correct (as expected). Thank you, upvopte. Just isn't there any approach to do that by pure CSS? — stack, Oct 28 '17 at 13:43

Rajan Benipuri · Answer 3 · 2017-10-28T13:47:19.157

Add display: flex; in your parent container and remove height: 100%; from the child div.

.solid_color{
  background-color: gray;
}
.myparent{
 display: flex;
 }

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="myparent">
  <div class="solid_color col-xs-3"></div>
  <div class="col-xs-9">
      " <span>A sentence from someone A sentence from someone A sentence from someone A sentence from someone A sentence from someone A sentence from someone A sentence from someone A sentence from someone A sentence from someone A sentence from someone</span> "
      <i>(Quote from someone)</i>
  </div>
</div>

Hope this help

score 0 · Answer 4 · answered Oct 28 '17 at 14:05

I would give the div with the background color a position absolute and push over the div with the text with some margin. See code below:

<!DOCTYPE html>
<html>

    <head>
            <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
    </head>
        <style>
            .solid_color {
                position: absolute;
                left: 0;
                top: 0;
                width: 25%;
                height: 100%;
                background-color: gray;
            }
            .outer {
                position: relative;
                float: left;
                display: block;
                width: 100%;
            }
            .right-text {
                margin-left: 25%;
            }

        </style>
    </head>
    <body>
        <div class="outer">
        <div class="solid_color col-xs-3"></div>
        <div class="right-text col-xs-9">
            " <span>A sentence from someone A sentence from someone A sentence from someone A sentence from someone A sentence from someone A sentence from someone A sentence from someone A sentence from someone A sentence from someone A sentence from someone</span> "
            <i>(Quote from someone)</i>
        </div>
    </div>
    </body>

</html>

How to fill parent height?

4 Answers4