% height without the height of the parent

  • 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 ? */
}

Answers


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%;
}

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


Need Your Help

Does BEGIN TRANSACTION do any sort of row/column locking?

c# sql sql-server sql-server-2008 tsql

I use begin transaction in my stored procedure. I have code that updates data:

Creating icon fonts with vector software (i.e. inkscape) and fontforge?

fonts svg true-type-fonts inkscape fontforge

Through getting some answers here and some research, I've come across a new approach to implementing icons. Rather than as images or css background, it seems you can approach icons as a font.

About UNIX Resources Network

Original, collect and organize Developers related documents, information and materials, contains jQuery, Html, CSS, MySQL, .NET, ASP.NET, SQL, objective-c, iPhone, Ruby on Rails, C, SQL Server, Ruby, Arrays, Regex, ASP.NET MVC, WPF, XML, Ajax, DataBase, and so on.