css - Div margin-bottom of a proportion of its own height? -
this question has answer here:
for example, have div has height of 100px
(i don't know height, let's suppose did). want set margin-bottom
percent, 25%
25px
assuming previous height. however, percent seems of document, not element:
<div style="height:100px;margin-bottom:100%"></div>
the margin should 100px
isn't, 100% of height of page.
the element line of text has no background, using height:150%
theoretically work.
as others note, don't know can use css this. jquery 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 - possibly done using em's.
edit 2 - em's keying off font size, not calculated box model size. won't work.
edit 3 - jcoc611 able use 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 }
Comments
Post a Comment