I want to inherit the height from div content to div information, its not working, heres my code. Here's a fiddle: I would like the red to be the same height as the blue. HTML:
<div> <div><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; } 3 Answers
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.
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).
Here's the fiddle.
1Just 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;} 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
