我有一个与这张海报相同的问题: 高度()和调整大小()的Jquery问题
但解决方案并没有解决我的问题.我有三个堆叠的div,我想使用JQuery使中间的高度调整到窗口高度的100%,减去其他顶部和底部div的高度(23px*2).它适用于调整大小,但是当文档最初加载时它会关闭(短)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);
}
mrt*_*man 53
我觉得应该没有javascript解决方案,但这是怎么回事？
$(window).resize(function() {
$('#content').height($(window).height() - 46);
});
$(window).trigger('resize');
好的,CSS答案怎么样!我们用display: table.然后每个div都是行,最后我们将100%的高度应用到中间的'row'和voilà.
body { display: table; }
div { display: table-row; }
#content {
width:450px;
margin:0 auto;
text-align: center;
background-color: blue;
color: white;
height: 100%;
}