CODEWITHSUNDEEP
htmlcss
Zanecola
Zanecola

Reputation: 1544

How to set div height same as parent container without using percentage?

I am using an angular plugin called angular-split, it offers a gutter to split resize-able part on html page.

The problem is that if you want to split something, the div contains the gutter must be set a height in specific value, not percentage.

So my question is if I want my div to full fill the parent container without using height=100%, what could I do?

Upvotes: 1

Views: 522

Answers (1)

frnt
frnt

Reputation: 8795

Are those divs individually style along-with a child div, if so you can do that by changing the display of parent and child element. No need to assign height to child element it by default takes as 100% of parent element.

Check below codes, red div is parent div and blue one child.

#parent {
  width: 100%;
  height: 400px;
  background: red;
  display: table;
  color: white;
  padding-top: 10px;/*Optional*/
}

#parent .child {
  width: 100%;
  height: auto;
  background: blue;
  display: table-cell;
}
<div id="parent">
  <div class="child">
    Child
  </div>
</div>

Upvotes: 1

Related Questions