Задать 100% высоту блоку на javascript
Сегодня мы научимся задавать 100% ширину блоку (div) в зависимости от высоты окна браузера. Конечно, это легко можно сделать и с помощью css (height:100%;). Однако, таким образом не получится задать высоту, например, равной 100% - (минус) 100px. Здесь нужен инструмент мощнее - будет использовать javascript (а точнее jQuery).
Их библиотеки предварительно нужно скачать и подключить к вашему сайту. Скачать можно с сайта http://jquery.com/download/. Подключаем следующим образом (помещаем код между тегами <head></head> нашей страницы - в заголовке):
<script type="text/javascript" src="jquery-1.7.2.js"></script>* This source code was highlighted with Source Code Highlighter.
где jquery-1.7.2.js - название файла с библиотеками (в моем случае это версия 1.7.2).
Далее перейдем к самому коду. В тело нашей страницы поместим контейнер со следующими стилями:
<div style="margin-top:100px;width:500px; position:absolute; background-color:#000; color:#fff;" class="class">Моя высота 100% от высоты окна минус 100px</div>* This source code was highlighted with Source Code Highlighter.
Если кратко - то это блок с абсолютным позиционированием и верхним отступом в 100px - это требуется, чтобы высота блока была 100% - 100px. Ширина блока - 500px, фоновый цвет - черный, цвет текста - белый. Сделали? Отлично.
Но в таком виде ничего работать не будет. Не хватает собственно скрипта, который будет задавать высоту нашему блоку. Помещаем его между тегами <head></head> в нашей странице (в заголовке):
<script type="text/javascript">
$(function() {
$(window).resize(function() {
$('div.class').height($(window).height() - $('div.class').offset().top);
});
$(window).resize();
});
</script>* This source code was highlighted with Source Code Highlighter.
Вот и все работает:)