Существует ли какое-либо решение, основанное исключительно на чистом CSS, для фиксации нижнего колонтитула внизу страницы в мобильных браузерах Web-kit?

#css #mobile-safari #mobile-website #mobile-webkit

#css #mobile-safari #мобильный веб-сайт #mobile-webkit

Вопрос:

Существует ли какое-либо решение, основанное исключительно на чистом CSS, для фиксации нижнего колонтитула внизу в мобильных браузерах Web-kit?

Особенно в браузерах iPhone и Android.

Ответ №1:

Не совсем. На самом деле эти браузеры не используют прокрутку; они размещают документ на бесконечном холсте, а затем перемещают по нему. Что является более или менее семантической формулировкой, позволяющей утверждать, что они не поддерживают position: fixed на практике.

Ответ №2:

Используйте flexbox 🙂

 <body>
    <div id="mainPart"></div>
    <footer></footer>
</body

<style>
body { 
   display: -webkit-box; -webkit-box-align: stretch; -webkit-box-orient: vertical;  
   display: -moz-box; -moz-box-align: stretch; -moz-box-orient: vertical;
 } 

#mainPart { -webkit-box-flex: 1;  -moz-box-flex: 1; position: relative; z-index: 2;}
footer{
      background-color:#FFC579;
      height:50px;
      position: relative; z-index: 3;
 }

1. Однако имейте в виду некоторые проблемы с flexbox, а именно изменение с box-* на flex-*, а также другие проблемы, рассмотренные здесь: oli.jp/2011/css3-flexbox Хотя это хорошее применение, я действительно надеюсь, что оно не станет доминирующим способом размещения вещей.

2. Я согласен, и на данный момент не верю, что, по крайней мере, этот метод заменит другие методы верстки страницы для настольных браузеров, он хорошо работает для простых мобильных макетов, подобных приведенному выше примеру. Для обычных макетов у меня есть сочетание OOCSS с простой сеткой и встроенными блоками, которые практически не создают проблем с макетом в ie.

3. Flexbox — это способ. 90% поддержка общего доступа к браузеру.

Ответ №3:

 #footer {
   position: fixed;
   bottom: 0;
}

jsFiddle.

Работает с iOS5.

1. @Jitendra Я только что попытался протестировать это на iPad, но панель результатов jsFiddle была полностью расширена (т. Е. Без полос прокрутки).

2. Примечание: это не работает в большинстве мобильных браузеров по причинам, изложенным Борисом ниже. Однако будет работать на последнем iPad.