Задать блоку минимальную высоту в 100% - 90px
Есть у меня на странице блок, которому нужно задать высоту в 100% - 90 пикселей.
Перепробовала множество скриптов, как на JQuery, так и на чистом яваскрипт - ничего у меня толком не заработало. Можете кинуть в меня сылочкой на рабочий вариант? Основная беда в том, что к странице прикручен плагин смены бэкграунда, и этот блок находится внутри оберток, которые этот плагин формирует на лету. Никак не получается у меня их подружить( |
Ленча,
http://htmlbook.ru/css/calc |
100%, извиняюсь, от чего?
Чем не устраивает решение на css, зачем скрипты нужны?
<style>
.outer {
height: 150px;
border: 1px solid green;
position: relative;
}
.inner {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 90px;
border: 1px solid red;
background: gray;
}
</style>
<div class="outer">
<div class="inner"></div>
</div>
|
рони, беда в том, что я не могу заставить блок отработать высоту в 100%, а значит и calc не сработает. Если бы я ему смогла 100% присвоить - calc бы не понадобился.
BETEPAH, не получается. Макет верстаю не с нуля - он уже давно готов,слайдер пришлось прикручивать уже после верстки. Вот и приходится выкручиваться. Мне нужно прижать футер к низу экрана. Банальная задача - но что-то я застряла((( |
.bgstretcher-page{
top:0;
bottom:45px;
left:0;
right:0;
position:absolute;
}
.bgstretcher-area{
height:100%;
}
|
Aetae, спасибо, сработало) подправила стили немного под себя чтобы не конфликтовало с внутренними. Единственное - пришлось ставить абсолют с important - скрипт выставляет relative.
Нашла решение и со скриптом. Для тех, кто наткнется на тему по поиску - вот скрипт установки высоты блока в 100%
( function($) {
$(document).ready(function($){ //запускаем, когда документ загрузится
$(window).resize(function(){ //Вешаем на событие ресайза у окна функцию
$("#wrapper").height($(window).height()); //меняем высоту дива на высоту окна
});
$("#wrapper").height($(window).height()); //меняем высоту дива на высоту окна в первый раз, т.к. событие просто при открытии не вызывается
});
} ) ( jQuery );
А это скрипт с установкой высоты в 100% минус отступ - не учитывая margin-bottom (не проверяла)
<script type="text/javascript">
$(function() {
$(window).resize(function() {
$('div.class').height($(window).height() - $('div.class').offset().bottom);
});
$(window).resize();
});
</script>
<div style="margin-bottom:100px;width:500px; position:absolute; background-color:#000; color:#fff;" class="class">Моя высота 100% от высоты окна минус 100px</div> Ваш движок не дает ставить плюсы в карму(( |
| Часовой пояс GMT +3, время: 23:22. |