Div margin-bottom от доли собственной высоты?

Например, у меня есть div, который имеет высоту 100px (я не знаю высоту, но предположим, что я это сделал). Я хочу установить margin-bottom на процент, поэтому 25% будет 25px, если предположить предыдущую высоту. Тем не менее, процент, кажется, относится к документу, а не к элементу:

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

Маржа должна быть 100px, но это не так, это 100% от высоты страницы.

Элемент - это всего лишь строка текста, которая не имеет фона, поэтому теоретически может быть использована теорема height:150%.

Ответы

Ответ 1

Как отмечают другие, я не знаю, что вы можете использовать CSS для этого. jQuery может помочь:

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. Это можно сделать с помощью em.

РЕДАКТИРОВАТЬ 2 - em вырезают размер шрифта, а не рассчитанный размер модели коробки. Так что это не сработает.

EDIT 3 - JCOC611 смог использовать подход em в конце концов.

Оригинал: http://jsfiddle.net/userdude/xN9V7/3/

JCOC611 Демо: http://jsfiddle.net/BCTg2/

Код:

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

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

Ответ 2

Как насчет решения CSS3:

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

Ответ 3

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

Проценты: см. ширину содержащий блок

Если ваш DIV находится в элементе BODY, то содержащий блок является элементом BODY, поэтому процент будет основан на ширине BODY, которая в большинстве случаев такая же, как ширина окна просмотра.

Демо: http://jsfiddle.net/jghsF/1/

(Попробуйте изменить ширину окна браузера, и вы увидите, что изменяется нижняя граница)

Ответ 4

Этот вопрос намного интереснее, чем я ожидал (+1).

Я работаю со следующей структурой html:

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

Первоначально я попытался использовать прописку для имитации "границы" (JS Fiddle demo):

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

p {
    background-color: #fff;
}

Это в предположении, что padding будет выводиться из высоты самого элемента, что оказалось ошибочным предположением.

После этого явно не удалось, я попытался использовать маркер для содержащихся элементов, исходя из предположения, что если элемент margin содержащего элемента основан на его родителях, то тоже должно быть поле содержащегося элемента, дающее следующее CSS:

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

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

JS Fiddle demo. И это тоже не удалось.

Я подозреваю, что это невозможно без определения height для родительского элемента, для которого может потребоваться решение JS.

Ответ 5

Вы не можете сделать это с помощью CSS 2, не обертывая еще один HTML-элемент вокруг того, на который вы хотите применить маржу.

Необходимый HTML:

<div id="wrapper">
    <div>Text</div>
</div>

CSS

#wrapper>div {
    height: 100%;
    margin-bottom: 150%; /* example */
}

В CSS 3, однако, вы можете попробовать размер окна. Попробуйте следующее (я не пробовал, но это может сработать):

div {
    box-sizing: margin-box;
    margin-bottom: 150%;
}

Обратите внимание, что CSS 3 не поддерживается всеми браузерами.