Div margin-bottom пропорционально собственной высоте? [Дубликат]

17

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

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

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

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

    
задан JCOC611 05.02.2011 в 22:18
источник

5 ответов

4

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

Ссылка

<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 в конце концов.

Оригинал: Ссылка

Демо JCOC611: Ссылка

Код:

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

div#foo {
    background-color: #fcc;
    margin-bottom: 1.5em;
    font-size:20px
}
    
ответ дан Jared Farrish 05.02.2011 в 22:42
источник
27

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

div {        
   -webkit-transform: translateY(-50%);
   -moz-transform: translateY(-50%);
}
    
ответ дан ShibbyUK 19.06.2012 в 17:20
источник
6

Ссылка

  

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

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

Демо: Ссылка

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

    
ответ дан Šime Vidas 05.02.2011 в 22:28
источник
1

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

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

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

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

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

p {
    background-color: #fff;
}

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

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

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

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

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

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

    
ответ дан David Thomas 05.02.2011 в 22:30
источник
1

Вы не можете сделать это с помощью 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 не поддерживается всеми браузерами.

    
ответ дан anroesti 05.02.2011 в 23:34
источник