Форум

katamason · #1 (**permalink**) 07.11.2014, 13:28

Здравствуйте. Пытаюсь блок растянуть на всю высоту экрана. Толком не знаю как сделать, при скроле вообще плохо. Внутри .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>

danik.js · #2 (**permalink**) 07.11.2014, 18:00

Сообщение от katamason

Пытаюсь блок растянуть на всю высоту экрана

height: 100vh

Для старых браузеров - скриптом выставляешь высоту, которую берешь из window.innerHeight

katamason · #3 (**permalink**) 07.11.2014, 22:25

danik.js,
window.innerHeight работает, но при ресайзе не всегда дотягивается до низа. Когда я пробывал на скрол поставить функцию высоты, сайдбар тянулся вниз до бесконечности.. Можно корректно высоту страницы + высоту скрола вычислить ?

ksa · #4 (**permalink**) 08.11.2014, 15:09

Сообщение от katamason

<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>

Сделай это табличкой...

<!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>

И будет тебе счастие...

danik.js · #5 (**permalink**) 08.11.2014, 17:02

От таблицы тут только профит если нижний блок резиновый. В противном случае она тут не в тему )
Как можно заметить - это прибивка футера, только ты еще тут прописал фиксированную высоту body 100%

Форум

Справочник

Discord чат

Курсы javascript