Div margin-bottom of a proportion of its own height?

For example, I have a div that has a height of 100px (I don't know the height, but let's suppose I did). I want to set the margin-bottom to a percent, so 25% would be 25px assuming the previous height. However, the percent seems to be of the document, not the element:

<div style="height:100px;margin-bottom:100%"></div>

The margin should be 100px but it isn't, it is 100% of the height of the page.

The element is just a line o开发者_StackOverflowf text that has no background, so using height:150% theoretically could also work.

How about a CSS3 solution:

div {        
   -webkit-transform: translateY(-50%);
   -moz-transform: translateY(-50%);
}

http://www.w3.org/TR/CSS21/box.html#margin-properties

Percentages: refer to width of containing block

If your DIV is in the BODY element, then the containing block is the BODY element, so the percentage will be based on the BODY width - which is in most cases the same as the width of the viewport.

Demo: http://jsfiddle.net/jghsF/1/

(Try resizing the width of the browser window and you will see that the margin-bottom changes)

As others note, I don't know you can use CSS to do this. jQuery could help:

http://jsfiddle.net/userdude/PZAvm/

<div id="margin">Foo</div>

div#margin {
    background-color:red;
    height:100px;
}

$(document).ready(function(){
    alert($('#margin').height());
    var margin = $('#margin').height()/4;
    $('#margin').css('margin-bottom',margin);
    alert($('#margin').css('margin-bottom'));
});

EDIT - This could possibly be done using em's.

EDIT 2 - em's are keying off font size, not a calculated box model size. So it won't work.

EDIT 3 - JCOC611 was able to use the em approach after all.

Original: http://jsfiddle.net/userdude/xN9V7/3/

JCOC611's Demo: http://jsfiddle.net/BCTg2/

The code:

<div id="foo">
    Foo
</div>
lol

div#foo {
    background-color: #fcc;
    margin-bottom: 1.5em;
    font-size:20px
}

This question is a great deal more fascinating than I'd expected (+1).

I'm working with the following html structure:

<div id="someContent">
    <p>Lorem ipsum.</p>
</div>

Originally I tried to use padding to simulate a 'border' (JS Fiddle demo):

#someContent {
    background-color: #000;
    border-radius: 1em;
    padding: 10%;
}

p {
    background-color: #fff;
}

This on the assumption that the padding would be derived from the height of the element itself, which turned out to be a wrong-assumption.

After that clearly failed I tried to use a margin on the contained elements, on the assumption that if the margin of the containing element is based on its parents, so too should the margin of the contained element, giving the following CSS:

#someContent {
    background-color: #000;
    border-radius: 1em;
}

p {
    margin: 10%;
    background-color: #fff;
}

JS Fiddle demo. And this failed, too.

I suspect that it's impossible without defining a height for the parent element, which might require a JS solution.