|
Клиент попросил прилепить footer к низу окна, но если страница по размерам больше размеров окна, то он должен быть в конце страницы. Т.е. свойство css "position: fixed" не прокатит. На помощь пришел всем известный jQuery.
|
|
|
|
Пусть страница имеет примерно такой вид:
|
<body>
<div class="first">
<!-- содержимое контейнера -->
</div>
<div class="second">
<!-- содержимое контейнера -->
</div>
</body>
|
|
В шапке страницы подключаем необходимые файлы:
|
<script type = "text/javascript" src = "jquery-1.4.2.min.js"></script>
<script type = "text/javascript" src = "footer.js"></script>
|
|
Файл footer.js содержит одну функцию getClientHeight(), которая возвращает размер окна браузера. Содержимое файла footer.js:
|
function getClientHeight() {
if (window.opera) {
return (self.innerHeight || ( de && de.clientHeight ) || document.body.clientHeight);
} else {
return document.compatMode=='CSS1Compat'?document.documentElement.clientHeight:document.body.clientHeight;
}
}
|
|
В шапку страницы добавляем следующий JavaScript-код:
|
<script type = "text/javascript">
function run() {
jQuery('div.first').css('min-height',(getClientHeight() - parseInt(jQuery('div.second').css('height')))+'px');
};
window.onresize = run; // задавать ширину при изменении размеров окна
</script>
|
|
А сразу после обьявления нашего div.second :
|
<script type = "text/javascript">
run();
</script>
|
|
Итого, страница будет выглядеть примерно так:
|
<html>
<head>
<script type = "text/javascript" src = "jquery-1.4.2.min.js"></script>
<script type = "text/javascript" src = "footer.js"></script>
<script type = "text/javascript">
function run() {
jQuery('div.first').css('min-height',(getClientHeight() - parseInt(jQuery('div.second').css('height')))+'px');
};
window.onresize = run;
</script>
</head>
<body>
<div class="first">
<!-- содержимое контейнера -->
</div>
<div class="second">
<script type = "text/javascript">
run();
</script>
<!-- содержимое контейнера -->
</div>
</body>
</html>
|
|
Предложенный вариант работает во всех популярных браузерах (FireFox, Internet Explorer, Opera, Safari, Chrome). Копирайт внизу страницы сделан по этому ж принципу :)
|