Несогласованный расчет процентной маржи для абсолютно позиционированного элемента

Question

У меня есть ситуация, когда у меня есть «нижний» контент div в общем контейнере. Этот div должен оставаться на дне (с абсолютным позиционированием), но иметь процентный промежуток к основанию контейнера. Процент должен быть относительно ширины контейнера.

Мы не можем использовать «низ: 5%», потому что as the position props define это относительно высоты. Как насчет разницы? Да! Он работает в Chrome .. и Firefox. Ах, но не в Сафари. Кажется, Chrome и Safari рассчитывают его на основе ширины контейнера и Safari на высоте контейнера.

См. this fiddle в Chrome и Safari, и вы увидите несогласованность. CSS-стили:

.container { 
    background: #990000; 
    width: 345px; 
    height: 200px; 
    position: relative; 
} 
.bottom { 
    background: #000; 
    width: 100%; 
    height: 40px; 
    position: absolute; 
    bottom: 0; 
    margin-bottom: 5%; 
} 

Кто-нибудь знает, где здесь находится ошибка - с Safari? Chrome/Firefox? Спектр?

Быстрая проверка показывает, что отступы могут работать последовательно, но это не идеально подходит для тех, кто захочет использовать маржу (т. Е. Когда фон начинает играть).

Answer 1

Проблема заключается в Safari. Стандарты W3C определяют, что поля, которые определяются с использованием процентов, должны быть рассчитаны относительно ширины содержащего блока (а не высоты).

Проверьте это: http://www.w3.org/TR/2011/REC-CSS2-20110607/box.html#margin-properties

Так в основном, вы застряли с ошибкой. Однако я бы предложил использовать JS для настройки Safari, получить ширину контейнера и применить маржу в процентах от этой ширины.

Например:

var width = $('.container').width(); // get the width of div.container 
    var bottomMargin = width * 0.05;  // multiply the width by 0.05 to get 5% of the container width 

    // look to see if the browser is Safari 
    if (navigator.userAgent.indexOf('Safari') != -1 && navigator.userAgent.indexOf('Chrome') == -1) {     
     $('.bottom').css('margin-bottom', bottomMargin+'px'); // apply our margin to div.bottom 
    } 
    else { 
    };; 

У меня были некоторые проблемы, реализующий это в JS Fiddle так создали страницу here.

Надеюсь, что это поможет!

Answer 2

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

.bottom { 
    position: absolute; 
    bottom: 0; 
    width: 100%; 
    height: 40px; 
} 
.bottom-child { 
    height:100%; 
    margin-bottom: 5%; 
    background: #000; 
} 

Ключ не в том, чтобы поместить маржу на абсолютно позиционированный элемент.