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 не поддерживается всеми браузерами.