CODEWITHSUNDEEP
htmlcss
user3906410
user3906410

Reputation:

Inherit height from one div to another

I want to inherit the height from div content to div information, its not working, heres my code. Here's a fiddle: http://jsfiddle.net/maximusperson/pssh3jzg/ I would like the red to be the same height as the blue. HTML: 

<div class="content">
   <div class="information"><p>Welcome to website,<br>Created by me</p>
   </div>
</div>

CSS: 

.content {
    position: absolute;
    top: 100 % ;
    left: 0;
    width: 100 % ;
    height: 50 % ;
    background: white;
    align-self: center;
    margin: 0;
    padding: 0;
    background-color: blue;
}

.information {
    height: inherit;
    font-size: 24 px;
    font-family: serif;
    font-color: black;
    text-align: center;
    vertical-align: middle;
    background-color: red;
}

Upvotes: 2

Views: 9082

Answers (3)

Kushal
Kushal

Reputation: 3178

When you provide height to any div (here, it is div.content) in Percent, it is always in relation to parent of that div, and again, I believe parent of content div doesn't have any height given at all.

So giving height:inherit on div.information won't work as you'd expect, i.e. class information to have same height as class content, instead div.information, as given height: inherit, will have 50% height of div.content.

height:inherit

But if you provide div.content height in fixed units (Percent is relative unit) like in Pixels, your div.information will have exact same height as div.content (inherit, so to speak).

height:50px

Here's the fiddle.

Upvotes: 2

Jose Paredes
Jose Paredes

Reputation: 4090

Your code is working fine,

you say to .information that the height is inherit, so .information will take the 50% regarding to parent,

if you want the same height you must set 100% to .information

Upvotes: 0

Sai Deepak
Sai Deepak

Reputation: 688

Just check it out this Fiddle

Some changes i have made in the code is

.information {height: 100%;position: relative;top: 0;}
.information p{margin: 0;}

Upvotes: 1

Related Questions