Question

我遇到的问题与这张海报相同： Jquery problem with height() and resize()

但解决方案并不能解决我的问题。我有三个堆叠的div，我想使用JQuery使中间的高度调整到窗口高度的100％，减去另一个顶部和顶部的高度（23px * 2）。底部的divs。它适用于调整大小，但是当文档最初加载时它会关闭（短）16px。

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);
}

Answer 1

我觉得应该没有javascript解决方案，但这是怎么回事？

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

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

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

Answer 2

好的，CSS答案怎么样！我们使用display: table。然后每个div都是行，最后我们将100％的高度应用到中间的'row'和voilà。

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%;
}

Answer 3

最干净的解决方案 - 也是纯粹的CSS - 将使用calc和vh。

中间div的高度将如此计算：

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

即，100％的视口高度减去2 * 23px。这将确保页面正确加载并且是动态的(demo here)。

另外请记住使用box-sizing，因此填充和边框不会使div填充视口。

Answer 4

要在调整大小时（或之后）查看窗口高度，请尝试：

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

JQuery：带窗口大小调整的动态高度（）（）

4 个答案: