CODEWITHSUNDEEP
css
Vladyslav Havrylenko
Vladyslav Havrylenko

Reputation: 347

Inherit height from parent with box-sizing: border-box

Here is the deal. I have parent div with css like:

.parent{box-sizing: border-box; height: 60px; border: 1px solid green;}

Child div with css:

.child{height:inherit;background: red}

Here is markup:

.parent {
  box-sizing: border-box;
  height: 60px;
  border: 1px solid green;
}

.child {
  height:inherit;
  background: red;
}
<div class="parent">
  <div class="child"></div>
</div>

https://jsfiddle.net/CheWebDev/fcecuvut/1/

So how to get inherit height from parent? Is it possible with box-sizing: border-box prop.?

Upvotes: 0

Views: 1410

Answers (1)

Red
Red

Reputation: 7334

Why not using height: 100%. As this is basicly the same as setting height: inherit. Where height: inherit makes it the exact height as its parent, height: 100% will make it based on the parent rules.

So if a padding isset (in your case a border), it will not overflow the padding. But only fills the available height of its parent.

.parent{box-sizing: border-box; height: 60px; border: 10px solid green;}
.child{height:100%;background: red}
   <div class="parent"><div class="child"></div></div>

Upvotes: 1

Related Questions