Join the Stack Overflow Community
Stack Overflow is a community of 6.8 million programmers, just like you, helping each other.
Join them; it only takes a minute:
Sign up
up vote 1 down vote favorite

Here is my Question I have an HTML like this 

<div class='A'>
    <div class='B'>Hello World</div>
    This div Height is more than first one due to the content size 
</div>

now I want to get the height of Parent div with class 'A' and that height has to be given to the div with class 'B'

only using CSS3. is it possible? Some-body please help me.

Thank you...

share|improve this question
2  
why do you need this? maybe there is the other solution. tell us what result are you expecting – spring Jun 11 '13 at 11:28
    
I have edited the html code I want to get the height of the parent div I am not specifying any height for div with class A – Yavana Jun 11 '13 at 11:34
1  
This sounds like an XY problem. It also sounds like you're looking for equal height columns. – cimmanon Jun 11 '13 at 11:48
    
Class B DIV is not adjacent, is a child for class A div, so width inherit is to be used for class B DIV. – Gimmy Jun 11 '13 at 14:06
up vote 3 down vote

CSS is not a programming language so, no, you cannot do this as you state it.

share|improve this answer
up vote 2 down vote

As mentioned before CSS is not a programming language you cannot achieve that with it however you can use jQuery instead:

$(document).ready(function(){
    $(".B").css("height", $(".A").height());
});

Or you can do this with CSS:

.A { 
    height: 300px;
}

.B {
    height: inherit;
}
share|improve this answer
    
You don't need jQuery and plain javascript will work but he only wants to use CSS. – Rob Jun 11 '13 at 12:03
    
that's why I gave the CSS approach as well! – Mohammad Areeb Siddiqui Jun 11 '13 at 12:04
up vote 1 down vote

If you're explicitly setting the height of the parent, you can set the child's height to be 100% to achieve this effect. View on JSFiddle.

css

#parent {
  background: #eee;
  height: 200px;
}
div div {
  background: #aaa;
  height: 100%;
}

HTML

<div id="parent">
<div>lalala</div>
</div>

If you're not explicitly setting the height, you'll need to specify the question more. Divs are block level elements and want to take up an entire row to themselves. The code you posted will result in the child div and the text of the parent being on different rows. Because of that, it's hard to know what height you're looking for...maybe if the parent just had text? And then, what do we do with the div in relation to the text? Overlap it? Or push the div out the bottom of the parent?

share|improve this answer
up vote 0 down vote

If you want to set the same height to upper and to lower text You can add to parrent

.A
{
display: table;   
}

And you can add to child

.B
{
  display: table-row;     
}
share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.