Растянуть блок на всю высоту
Здравствуйте. Пытаюсь блок растянуть на всю высоту экрана. Толком не знаю как сделать, при скроле вообще плохо. Внутри .widget-area лежит .ass_box и должен располагаться внизу высокого сайдбара. Буду благодарен за помощь
$(document).ready(function() {
getWidthAndHeight();
});
$(window).resize(function() {
getWidthAndHeight();
});
$(window).scroll(function() {
// getWidthAndHeight();
});
function getWidthAndHeight (){
var ass_box = $('.widget-area .ass_box').outerHeight();
var parse_ass = parseInt(ass_box);
var sd = $('#secondary.widget-area').outerHeight();
var parse_sd = parseInt(sd);
var scroll = $(window).scrollTop();
var sidebarHeight = (parse_sd + ass_box) ;
var bodyHeight = $(window).height();
var bodyWidth = $(window).width();
$("#secondary.widget-area").css('min-height', bodyHeight +scroll + 'px');
}
});
<div id="secondary"> <ul> <li>Пункт 1</li> <li>Пункт 2</li> <li>Пункт 3</li> </ul> <div class="ass_box" style="position:absolute; bottom:0px;">Этот блок внизу</div> </div> |
Цитата:
Для старых браузеров - скриптом выставляешь высоту, которую берешь из window.innerHeight |
danik.js,
window.innerHeight работает, но при ресайзе не всегда дотягивается до низа. Когда я пробывал на скрол поставить функцию высоты, сайдбар тянулся вниз до бесконечности.. Можно корректно высоту страницы + высоту скрола вычислить ? |
Цитата:
<!DOCTYPE html>
<html>
<head>
<!--
<script src='http://code.jquery.com/jquery-latest.js'></script>
<link rel='stylesheet type=text/css href=tmp.css' />
-->
<style type='text/css'>
* {
margin: 0;
padding: 0;
}
html,
body {
width: 100%;
height: 100%
}
#secondary {
width: 100%;
height: 100%
}
</style>
<script type='text/javascript'>
</script>
</head>
<body>
<table id="secondary">
<tr>
<td style='height: 1%;'>
<ul>
<li>Пункт 1</li>
<li>Пункт 2</li>
<li>Пункт 3</li>
</ul>
</td>
</tr>
<tr>
<td class="ass_box" style='background-color: green;'>
Этот блок внизу
</td>
</tr>
</table>
</body>
</html>
И будет тебе счастие... ;) |
От таблицы тут только профит если нижний блок резиновый. В противном случае она тут не в тему )
Как можно заметить - это прибивка футера, только ты еще тут прописал фиксированную высоту body 100% |
| Часовой пояс GMT +3, время: 06:53. |