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

19

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

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

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

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

    
задан JCOC611 05.02.2011 в 22:18
источник
  • Подтверждено: jsfiddle.net/jghsF –  Šime Vidas 05.02.2011 в 22:25
  • Спасибо за быструю скрипку! –  JCOC611 05.02.2011 в 22:27
  • @JCOC Фактически, процент основан на ширине страницы, а не высоте ... –  Šime Vidas 05.02.2011 в 22:31
  • Ну ладно, тогда это хуже, чем я думал! –  JCOC611 05.02.2011 в 22:36
  • Может ли это помочь? stackoverflow.com/questions/485827/... –  Jared Farrish 05.02.2011 в 23:00

5 ответов

5

Как отмечают другие, я не знаю, что вы можете использовать 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
источник
  • Проблема в том, что высота будет сильно изменяться, поэтому я надеялся на ответ CSS. (конечно, я мог бы обновить маржу w / javascript, но это займет слишком много кода) –  JCOC611 05.02.2011 в 22:47
  • @JCOC Вы сказали, что это всего лишь одна строка текста ... –  Šime Vidas 05.02.2011 в 22:48
  • Кто сказал, что высота будет меняться путем переноса текста? –  JCOC611 05.02.2011 в 22:49
  • Я думаю, что получение высоты для элемента из расчета, которое зависит от ширины, не будет работать (как указывает Симе Видас со ссылкой на документы). Если вы можете опубликовать пример своего использования с html и вашим css, это может помочь устройству принять решение с учетом ваших конкретных потребностей. Кстати, я лично считаю глупым, что margin-top и margin-bottom полагаются на содержащую ширину. : \ –  Jared Farrish 05.02.2011 в 22:53
  • @ JCOC611 - См. мое правление о em. –  Jared Farrish 05.02.2011 в 23:12
Показать остальные комментарии
32

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

div {        
   -webkit-transform: translateY(-50%);
   -moz-transform: translateY(-50%);
}
    
ответ дан ShibbyUK 19.06.2012 в 17:20
источник
  • translateY как процент, похоже, относится к высоте самого элемента, а не к высоте его родителя. –  Bugalugs Nash 11.02.2014 в 08:01
  • Этот вопрос касается не родителя. –  ShibbyUK 16.01.2015 в 13:28
  • Твой гениальный! это должен быть правильный ответ –  mamashare 21.02.2017 в 14:09
  • , однако это не влияет на окружающие элементы, такие как margin. так что это вроде действует как относительное положение. Могу ли я использовать преобразование, которое влияет на окружающие элементы? –  Hans 25.07.2017 в 12:30
6

Ссылка

  

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

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

Демо: Ссылка

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

    
ответ дан Šime Vidas 05.02.2011 в 22:28
источник
  • Использование оберток (которое было бы решением) на самом деле не вариант для меня. Итак, есть ли другой способ сделать это? –  JCOC611 05.02.2011 в 22:31
  • @JCOC Я не могу точно сказать, может быть решение CSS3. Кроме того, JavaScript (очевидно). –  Šime Vidas 05.02.2011 в 22:42
2

Вы не можете сделать это с помощью 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
источник
  • размер окна: поле margin; недействительна. –  baacke 14.04.2016 в 23:19
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
источник
  • Спасибо! JS, однако, мое последнее средство, но вы можете проверить редактирование моего вопроса, это может вдохновить что-то еще! –  JCOC611 05.02.2011 в 22:44
  • Нет JS-решения, пожалуйста! Подумайте о людях, которые отключили JavaScript (есть некоторые веские причины отключить его). –  anroesti 05.02.2011 в 23:30
  • Ну, все мое приложение опирается на JS ...: P –  JCOC611 05.02.2011 в 23:31