Как решить проблему с кроссбраузерностью background?

Question

[Данил Доценко]

Код -
background-color: #4bc8d7;
padding-top: 1%;
padding-bottom: 2%;

В ходе верстки просматриваю страницу в Chrome и Safari (на Маке).
Проблема: высота фона в Chrome выходит больше, разница была примерно в 3px.
Многое уже перепробовал и нифига.
Что более менее приблизило меня к желаемому результату -
min-height: 100%;
height: 570px !important;
height: 100%;
однако разница все равно была на 0,4 px.

Answer 1

[profesor08]

В разных браузерах разная высота страницы, так как часть окна выделена под панель, высота панелей разная у разных браузеров, так что не вижу тут проблемы.

Comments

[Rustam Bainazarov]

Данил Доценко, полный код в студию. От чего, как вы думаете, считаются ваши проценты?

99.9% автор ответа прав.

[Данил Доценко]

SmthTo, с процентами я тестил просто.
мне нужно разместить изображение на фоне так, чтоб нижний край фона совпадал с нижним краем изображения

[Rustam Bainazarov]

Данил Доценко, код в студию:
jsfiddle.net

[Данил Доценко]

SmthTo, https://jsfiddle.net/ItxD1/4kyvcges/1/#&togetherjs...

[Rustam Bainazarov]

Данил Доценко, картинка-то какая? Выложите на https://ru.imgbb.com.

[Rustam Bainazarov]

Данил Доценко, и напишите селектор, для которого нужен фон. section#main?

[Данил Доценко]

да, section#main

[Данил Доценко]

SmthTo, https://clck.ru/F39Kr

[Данил Доценко]

SmthTo, поглядели?

Answer 2

[FeST1VaL]

Я бы переверстал...
Если сохранять как у тебя сверстано, то если правильно понял из ваших комментариев, то я бы сделал так...
1. Поменял стили main
2. Отдал часть стилей main в container
3. Переделал картинку. (я не знаю зачем тебе столько снизу пространства...)
4. Поменял стили у img

https://jsfiddle.net/fest1val/p6k7agxm/