Есть ли какое-либо чистое решение для CSS, чтобы нижний колонтитул был зафиксирован внизу страницы в браузерах Mobile Web-kit?

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

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


css mobile-safari mobile-website mobile-webkit
person Jitendra Vyas    schedule 23.04.2011    source источник

Ответы (3)


arrow_upward
4
arrow_downward

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

person Boris Zbarsky    schedule 23.04.2011

arrow_upward
2
arrow_downward

Используйте флексбокс :)

<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;
 }
person Shelomo    schedule 03.05.2011
comment
Помните о некоторых проблемах с flexbox, а именно о переходе с box-* на flex-*, а также о других проблемах, описанных здесь: oli.jp/2011/css3-flexbox Хотя это полезное использование, я очень надеюсь, что оно не станет доминирующим способом изложения вещей. - person Rich Bradshaw; 03.05.2011
comment
Я согласен и не верю, что на данный момент, по крайней мере, этот метод заменит другие методы макета страницы для настольных браузеров, он хорошо работает для простых мобильных макетов, таких как приведенный выше пример. Для основных макетов у меня есть крест OOCSS, простая сетка и встроенные блоки, которые почти не создают проблем с макетом, т.е. - person Shelomo; 04.05.2011
comment
Flexbox - это путь. Поддержка более 90% рынка браузеров. - person Dan Dascalescu; 11.07.2015

arrow_upward
2
arrow_downward 

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

jsFiddle.

Работает с iOS5.

person alex    schedule 23.04.2011
comment
@Jitendra Я только что пытался протестировать его на iPad, но панель Result jsFiddle была полностью расширена (т.е. без полос прокрутки). - person alex; 23.04.2011
comment
Примечание: это не работает в большинстве мобильных браузеров по причинам, изложенным Борисом ниже. Однако будет работать на последнем iPad. - person jsims281; 11.06.2012