Макет сайта с динамическим липким нижним колонтитулом, который работает с IE6 без JS: возможно ли это?

Question

Требование просто: создайте макет сайта с динамическим липким нижним колонтитулом (то есть нижний колонтитул динамической высоты, который придерживается нижней части окна просмотра, когда содержимое не заполняет всю область просмотра, но это под контентом и не сразу видно, когда контент выходит за пределы высоты окна просмотра), который работает в браузерах обратно в IE6 и не требует работы JS-хаков.
Возможно ли это?

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

Я пытался любое количество макетов с дивами и таблицами, но я не могу думать ни о том, что получить эту работу в старых IE, Firefox и т.д. Любая помощь будет высоко оценен.
Спасибо.

Answer 1

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

Ближайший я думаю, что вы сможете получить даже с текущим CSS («текущий», конечно, полностью исключает IE6) заключается в использовании процентов. Проблема с процентами заключается в том, что нижний колонтитул не будет динамически отнесен к содержимому нижнего колонтитула, он будет рассчитан на ваше лучшее предположение относительно процентного значения для использования. Это не будет удовлетворительным.

Вы сказали, что хотите избежать «хаков» JavaScript, но, тем не менее, вы могли бы почти наверняка снять это с помощью JavaScript, установив нижний колонтитул абсолютно позиционированным, нижнее положение прибитое до нуля (0) и запись события который обнаруживает изменения в высоте нижнего колонтитула и соответствующим образом изменяет размер основного окна содержимого.

Я не знаю, что я назвал бы это «взломом» в уничижительном смысле. Это всего лишь код, делая то, что вы говорите ему. Конечно, если корпоративная (или другая) политика, в которой вы пытаетесь реализовать это, не позволит использовать JavaScript, это другое дело. И учитывая, что пародия на безопасность 14-летнего IE6 находится на этом этапе игры, я на самом деле был бы одним из тех, кто хотел бы отключить JavaScript. Но это, конечно, исключает возможность развертывания любого удаленного современного факсимиле «приложения». Конечно, я имею в виду современные удобные обратные связи, которые я разрабатывал в толстых клиентских приложениях более 20 лет назад и которые стали действительно возможными в веб-браузерах со времен веб-стандартов «Web 2.0». IE6, конечно, предшествует даже этому.

Обеспечение полной поддержки IE6 может быть высоким порядком.

Вы уверены, что не можете указать, что ваше приложение должно работать в современном браузере? Самые последние версии Chrome и Firefox все еще могут быть установлены в Windows XP, и любой, кто не верит в новые версии Chrome или Firefox, намного более безопасен, чем древний, IE6 с ошибкой, обманывающий себя.Было сказано, что; если вы все еще используете Windows XP, у вас очень серьезные проблемы с безопасностью, ожидая, когда вас укусят.

Answer 2

Вот что вам нужно добавить в свой CSS:

html,body{width:100%;} //This makes sure the body takes up 100% of the window 
.wrapper{min-height:100%; margin-bottom:-/*height of footer*/px;} 
.push{height:/*height of footer*/px;} 
.footer{height:/*height of footer*/px;} 

Wrap все из зеленой секции в DIV с class="wrapper" и добавить <div class="push"></div> в нижней части, чтобы предотвратить вашу зеленую зону от переполнения в фиолетовой области (из-за отрицательного запаса).

Answer 3

Возможно со старой таблицей HTML в школьной школе. Следующий код должен работать в IE6.

html, body, table { height: 100%; } 
 
table { width: 100%; } 
 
td { vertical-align: top; } 
 
.header { background-color: orange; } 
 
.main { 
 
    background-color: green; 
 
    height: 100%; 
 
} 
 
.footer { background-color: purple; }

<table> 
 
    <tr> 
 
    <td class="header">1</td> 
 
    </tr> 
 
    <tr> 
 
    <td class="main">2</td> 
 
    </tr> 
 
    <tr> 
 
    <td class="footer">3</td> 
 
    </tr> 
 
</table>

Для новых браузеров вы можете сделать то же самое с таблицами CSS.

html, body, .table { height: 100%; } 
 
.table { 
 
    display: table; 
 
    width: 100% 
 
} 
 
.row { display: table-row; } 
 
.cell { 
 
    display: table-cell; 
 
    vertical-align: top; 
 
} 
 
.header { background-color: orange; } 
 
.main { 
 
    background-color: green; 
 
    height:100%; 
 
} 
 
.footer { background-color: purple; }

<div class="table"> 
 
    <div class="row"> 
 
    <div class="cell header">1</div> 
 
    </div> 
 
    <div class="row"> 
 
    <div class="cell main">2</div> 
 
    </div> 
 
    <div class="row"> 
 
    <div class="cell footer">3</div> 
 
    </div> 
 
</div>