% height without the height of the parent

Question

Is it possible to give a % height to a div without knowing the height of the parent? or better say, if the height of the parent changes. If this is not possible:
What is the better way to have a text and a background of color and everything flexible to any device? The text should have some distance from the background. Like this case:

Here is the example simplified:http://jsfiddle.net/hQtMU/

HTML:

<div class="grey">
<div class="text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam magna erat, viverra at elementum at, elementum vitae mauris. Aenean in quam lorem, ut blandit ante. Integer sit amet nisi massa, at adipiscing nunc. Duis in risus a sapien blandit ultrices. Morbi ut ante eu neque porta lacinia et sed nisi. Donec luctus, enim in hendrerit ornare, purus libero adipiscing tortor, eget volutpat nunc tellus vitae turpis. Mauris sed fringilla nibh. Mauris pellentesque mauris eget velit iaculis tincidunt. Suspendisse neque velit, adipiscing nec consectetur sit amet, porttitor sed tortor. Vestibulum interdum auctor lorem, a porta metus eleifend in. Maecenas a lobortis neque. Duis fermentum arcu purus. Praesent eget diam sed felis varius semper ut a tortor. Cras bibendum sollicitudin facilisis. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Ut auctor adipiscing risus, eget interdum libero ultricies at.
</div><!-- end text -->
</div><!-- end grey -->

CSS:

html, body { height: 100%; width: 100%; margin: 0; }

.grey{
    position:relative;
    margin:0px auto;
    top:0px; left:0px;
    width:90%; 
    height:auto;
    min-width:320px;
    background:grey;        
}

.text {
    position:relative;
    margin:0px auto;
    width:80%; 
    height:80%; /* this does no work ? */
}

No, as parent's height will be always the same as children's — Morpheus, May 03 '13 at 08:45
http://stackoverflow.com/questions/1122381/how-to-force-child-div-to-100-of-parents-div-without-specifying-parents-heigh — Morpheus, May 03 '13 at 08:54

score 0 · Answer 1 · answered May 03 '13 at 09:28

If the .text has a % height, then it's height would be a percentage of the closest ancestor element with position other than static. If the ancestors height is auto then its height is stretched to it's content. If the only content inside it, is the .text element then it's height is defined by .text height, which in other words means that .text height should be calculated as 80% of it's own height which of course can't be calculated.

But

If .text is not the only element in the .grey and it is absolute positioned then, .grey height will be calculated by the other content in it and then, .text will be 80% of it.

example

This is getting a bit like inception for CSS – Barney May 03 '13 at 09:30 — Barney, May 03 '13 at 09:30

score 0 · Accepted Answer · answered May 03 '13 at 09:31

0

Is this what you where trying to achieve?

I used padding instead of heights.

http://jsfiddle.net/WSACt/

.text {
    position:relative;
    margin:0px auto;
    padding:10%;
}

answered May 03 '13 at 09:31

Kayo

702
3
10

If padding is set as a percentage it's always relative to parents width, that means even if you use `padding-top:10%`. – xpy May 03 '13 at 09:34
Maybe you should rephrase your question to describe better what you are actually trying to achieve, instead of a technical question. I might as mis-understood what you're trying to do. edit: sorry thought you where the OP – Kayo May 03 '13 at 09:37
Ok. Thank you. But in your fiddle you have to remove the width and height of .text. Here is solved: http://jsfiddle.net/WSACt/1/ – Nrc May 03 '13 at 10:05

% height without the height of the parent

2 Answers2