CODEWITHSUNDEEP
javascriptjqueryhtmlcss
jstuardo
jstuardo

Reputation: 4426

How to expand a DIV to use the whole parent DIV height

I have this HTML structure:

<div class="right_col" role="main" style="min-height: 647px;">
  <div class="fill">
    <div class="page-title"></div>
    <div class="clearfix"></div>
    <div class="row"></div>
  </div>
</div>

And "fill" class is:

.fill {
    min-height: 100%;
    height: 100%;
    box-sizing: border-box;
}

However, the DIV with "fill" class does not expand to its parent, that has a min-height of 647px. Is there a way to solve this?

Upvotes: 1

Views: 390

Answers (4)

Edison D&#39;souza
Edison D&#39;souza

Reputation: 4640

Simply add this to your CSS:

.right_col {
  position: relative;
}

That's it. Child div will consider 100% with respect to its parent div.

Upvotes: 0

Scott Marcus
Scott Marcus

Reputation: 65853

Percentage heights for elements in the normal document flow only work if the height (not min-height) of the parent element is known. In situations where the parent's height is, itself, a percentage, then that element's parent height must be known. This can go all the way up to the HTML element when heights are not explicitly set on all the ancestors.

html, body { height:100%; }

.right_col {
  border: 2px solid blue;
  height: 647px;
}

.fill {
    height: 100%;
    box-sizing: border-box;
    background-color:yellow;
}
<div class="right_col" role="main">
  <div class="fill">
    <div class="page-title"></div>
    <div class="clearfix"></div>
    <div class="row"></div>
  </div>
</div>

Upvotes: 3

G-Cyrillus
G-Cyrillus

Reputation: 106048

you may use flex;

.right_col {
  min-height: 647px;
  display: flex;
}

.fill {
  flex: 1;
  background: gray;/* see me */
  box-sizing: border-box;
}
<div class="right_col" role="main">
  <div class="fill">
    <div class="page-title">t</div>
    <div class="clearfix">clr</div>
    <div class="row">r</div>
  </div>
</div>

Upvotes: 3

samanime
samanime

Reputation: 26615

In order for an element to fill to it's parent's height with a percentage, the parent itself must have an actual height set.

Which makes sense if you think about it. If it's child is growing it height, that stretches the parent, but that makes the child need to grow more, stretching the parent, etc. until the parent and child are infinitely tall. It's a bit tricky.

If you need a child to fill up some space that it's sibling caused, you can also try using position: absolute and left, right, top, and/or bottom to fill in the extra space, in some scenarios.

Upvotes: 0

Related Questions