margin-bottom issue на сафари

Safari не берет нижнюю часть поля на моей полной высоте. У кого-нибудь такая проблема?margin-bottom issue на сафари

Я сделал быстрый скрипку ->https://jsfiddle.net/m34hr01s/

Он отлично работает на хроме и светлячок, но не сафари:/

Я использую загрузчик и WordPress

<body> 
    <header></header> 
    <section></section> 
    <footer></footer> 
</body> 


html,body{ 
    width:100%; 
    height:100%; 
    position:relative; 
    margin:0; 
} 

header{ 
    width:100%; 
    height:50px; 
    background:#3D2D34; 
    position:absolute; 
    left:0; 
    top:0; 
    z-index:3; 
} 

section{ 
    width:100%; 
    height:100%; 
    background:#799C94; 
    z-index:10; 
    margin-bottom:100px; 
} 

footer{ 
    width:100%; 
    height:100px; 
    background:#E3E29F; 
    position:fixed; 
    left:0; 
    bottom:0; 
    z-index:-1; 
}

источник

2016-05-11 Francis Themens

Используя процентную height позволяет указать размерность относительно размера родительского контейнера, а не относительно свободного пространства внутри контейнера.

CSS2

% Определяет высоту в процентах. Процент вычисляется относительно высоты блока, содержащего сгенерированный блок.

Сказал, что при попытке использовать 100%, когда ящик частично заполнен другими объектами, это неправильно. Если вы действительно хотите использовать свой код, приемлемое решение будет

header { 
    position: relative; 
} 

section { 
    height: calc(100% - 100px - 50px); 
}

Но calc должен быть вашим последним вариантом, так что я действительно рекомендую вам использовать flex столько, сколько вы можете.

html, body { 
    width: 100%; 
    height: 100%; 
    margin: 0; 
} 

body { 
    display: flex; 
    flex-direction: column; /* We are stacking boxes in column. */ 
    justify-content: space-between; /* Content is spread across all the free space. */ 
} 

header { 
    flex: 0 0 50px; /* Exactly 50px. */ 
    background: #3D2D34; 
} 

section { 
    flex: 1; /* All the free space is mine. */ 
    margin-bottom: 100px; 
    background: #799C94; 
} 

footer { 
    position: fixed; 
    width:100%; 
    height:100px; 
    left:0; 
    bottom:0; 
    background: #E3E29F; 
}

JSFiddle

источник

2016-05-11 23:26:48

Привет! Спасибо за Ваш ответ! Это будет отличное решение, если захочется всегда видеть нижний колонтитул. В моем случае я хочу, чтобы нижний колонтитул фиксировался на дне и раскрыл его при прокрутке вниз. Кроме того, теперь flexbox работает лучше с Internet Explorer? У меня были некоторые проблемы с ним в прошлом. Спасибо! –

Добро пожаловать. Я обновил ответ, чтобы использовать фиксированный нижний колонтитул. О поддержке IE, современный IE (Edge) поддерживает flex полностью. если вы используете Modernizr или другой механизм обнаружения признаков, вы можете по умолчанию использовать flex box и fallback с помощью 'calc()' на старом IE. –

margin-bottom issue на сафари

ответ

Смежные вопросы