Веб-браузер Android, использующий JavaScript, чтобы нижний колонтитул находился внизу экрана - PullRequest
Новая
       9

Веб-браузер Android, использующий JavaScript, чтобы нижний колонтитул находился внизу экрана

2 голосов
/ 06 декабря 2011

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

В основном у меня было несколько html-страниц, которые различались по высоте, и не всегда было очевидно, требуется ли прокрутка или чтона экране было видно все, что было доступно на странице.

Итак, я ввел зеленую линию в качестве нижнего колонтитула, которая будет располагаться внизу экрана, если не требуется прокрутка, но будет располагаться внизу текста, если требуется прокрутка.Другими словами, если бы пользователю требовалась прокрутка, зеленая линия не была бы видна на видимой части экрана.

Я не могу поверить, насколько трудной оказалась эта задача.

Изначально у меня просто зеленая линия внизу текста: 

<div id="footer" style="width: 320px; height: 5px; background:#fff url(./images/body_bg.gif) repeat-x;"></div>

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

style="position:absolute;
        width:100%;
        height:100%;
        min-height:100%; "

для контейнера div и 

<div id="footer" style="width: 320px; height: 5px; background:#fff url(./images/body_bg.gif) repeat-x; position:relative; bottom:0;"></div>

Добавил позицию: относительный;внизу: 0;в нижний колонтитул, и это заставило нижний колонтитул сидеть в нижней части экрана.

Следующая проблема, которая оказалась наиболее трудной для преодоления, заключалась в том, чтобы нижний колонтитул располагался ниже всего текста, если содержимое было больше высоты экрана.До этого момента нижний колонтитул отображался в нижней части экрана, даже если внизу было больше содержимого.Это означало, что пользователь снова никогда не знал, есть ли еще контент для чтения.

Поэтому, чтобы преодолеть эту проблему, я использовал некоторый javascript, который вызывался при загрузке страницы 

function getDocHeight(){
            var documentBody = document.getElementById('wrapper').offsetHeight;
            var windowHeight = window.innerHeight;

            if(documentBody<windowHeight){
                document.getElementById('footer').style.position="absolute";
                document.getElementById('footer').style.bottom="0";
            }
        }

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

Ключ был в том, чтобы ввести div-обертку, единственная цель которой состояла в том, чтобы узнать его собственную высоту для выполнения условия if.

...