it-roy-ru.com

JQuery: динамическая высота () с окном resize ()

У меня проблема, идентичная этому постеру: Jquery проблема с height () и resize ()

Но решение не решает мою проблему. У меня есть три сложенных элемента деления, и я хочу использовать JQuery, чтобы средняя часть подгонялась по высоте к 100% высоты окна минус высота (23px * 2) других верхних и нижних элементов. Он работает с изменением размера, но отключается (сокращается) на 16 пикселей при первоначальной загрузке документа.

HTML

<body>
<div id="bg1" class="bg">top</div>
<div id="content">
    help me. seriously.
</div>
<div id="bg2" class="bg">bottom</div>
</body>

CSS

html,
body {
    width:100%;
    height:100%;
}

.bg {
width:315px;
height:23px;
margin:0 auto;
text-indent:-9000px;
}

#bg1 {background:url(../images/bg1.png) 0 50% no-repeat;}
#bg2 {background:url(../images/bg2.png) 0 50% no-repeat;}

#content {
width:450px; 
margin:0 auto;
text-align: center;
}

JQuery

$(document).ready(function(){
    resizeContent();

    $(window).resize(function() {
        resizeContent();
    });
});

function resizeContent() {
    $height = $(window).height() - 46;
    $('body div#content').height($height);
}
22
Gregir

Я чувствую, что не должно быть никакого решения javascript, но как это?

http://jsfiddle.net/NfmX3/2/

$(window).resize(function() {
    $('#content').height($(window).height() - 46);
});

$(window).trigger('resize');
53
mrtsherman

Хорошо, как насчет ответа CSS! Мы используем display: table. Затем каждый из div - это строки, и, наконец, мы применяем высоту 100% к средней строке и вуаля.

http://jsfiddle.net/NfmX3/3/

body { display: table; }
div { display: table-row; }
#content {
    width:450px; 
    margin:0 auto;
    text-align: center;
    background-color: blue;
    color: white;
    height: 100%;
}
6
mrtsherman

Самое чистое решение - также чисто CSS - было бы использовать calc и vh.

Высота среднего div будет рассчитываться следующим образом:

#middle-div { 
height: calc(100vh - 46px); 
}

То есть 100% высоты области просмотра минус 2 * 23px . Это обеспечит правильную загрузку страницы и ее динамичность (демонстрация здесь) .

Также не забудьте использовать размер окна, чтобы отступы и границы не делали div-ы заполняющими область просмотра.

4
Zheer McHammer Husain

Чтобы увидеть высоту окна во время (или после) изменения его размера, попробуйте:

$(window).resize(function() {
$('body').prepend('<div>' + $(window).height() - 46 + '</div>');
});
0
SuSanda