Мобильная версияВы используете Chrome для Android, при прокрутке тела адресная строка убегает и скрывается. Отлично!
Теперь вы хотите добавить на свою страницу нижний колонтитул, который будет прикрепляться внизу. Вы делаете следующее:
Код: Выделить всё
html {
margin:0;
padding:0;
height:100%;
}
body {
margin:0;
padding:0;
height:100%;
}
#contentWrap {
margin:0;
padding:0;
padding-bottom:4em;
min-height:calc(100% - 4em);
position:relative;
}
#footer {
margin:0;
padding:0;
height:4em;
width:100%;
position:absolute;
bottom:0;
background:#262626;
}Код: Выделить всё
Это работает великолепно: нижний колонтитул всегда будет прилипать к нижней части страницы, независимо от размера контента или масштаба окна просмотра.
Однако! Запустив это на мобильном дизайне и протестировав в Chrome Android, я обнаружил, что, установив для тела явный размер, он будет прокручивать только «содержимое внутри», вызывая зависание адресной строки. Другими словами, для переполненного контента установлена прокрутка по умолчанию.
Заметив это, я попытался изменить его на минимальную высоту, чтобы он всегда был либо размером области просмотра, если для его заполнения нет контента, либо изменил высоту, если строк контента много.
Однако это приведет к тому, что contentWrap будет основывать свою высоту на контенте, а не на родительском элементе, т.е. . Таким образом, ваш нижний колонтитул теперь плавает, а не прилипает к низу.
Я поигрался со многими комбинациями и, похоже, не смог получить то, что хочу. Кажется, вам придется жить либо с прикрепленной адресной строкой, либо с плавающим нижним колонтитулом.
Будем признательны за любые идеи и мысли по этому поводу.
Подробнее здесь: https://stackoverflow.com/questions/264 ... ddress-bar
