HTML
<div class="header">Header</div>
<div class="body">
<table class="body-table">
<tr>
<td>Cell</td>
<td>Cell</td>
<td>Cell</td>
</tr>
<tr>
<td>Cell</td>
<td>Cell</td>
<td>Cell</td>
</tr>
<tr>
<td>Cell</td>
<td>Cell</td>
<td>Cell</td>
</tr>
<tr>
<td>Cell</td>
<td>Cell</td>
<td>Cell</td>
</tr>
<tr>
<td>Cell</td>
<td>Cell</td>
<td>Cell</td>
</tr>
<tr>
<td>Cell</td>
<td>Cell</td>
<td>Cell</td>
</tr>
<tr>
<td>Cell</td>
<td>Cell</td>
<td>Cell</td>
</tr>
</table>
</div>
<div class="footer">
<button>Submit</button>
</div>
CSS
.header{
height:50px;
background-color:#ccc;
width:500px;
}
.body{
width:500px;
max-height:600px;
text-align:center;
background-color:#ddd;
overflow:auto;
}
.body .body-table{
border-collapse:collapse;
text-align:center;
margin:0 auto;
width:100%;
}
.footer{
width:500px;
height:50px;
background-color:#eee;
}
JQUERY
var windowHeight = $(window).height();
$(window).resize(function(){
if(windowHeight<600+'px'){
$('.body').height($('.body').height()-20+'px');
}
});
JSfiddle
http://jsfiddle.net/bDL46/ http://jsfiddle.net/bDL46/
我想根据调整窗口大小来增加和减少。如果窗口高度600,则增加 .body div 高度。但我做不到。我的 jquery 代码不工作我该怎么做?
您不需要添加“px”。并且您应该在触发调整大小事件后检索窗口高度。
$(window).resize(function(){
if($(window).height() < 600){
$('.body').height($('.body').height()-20);
}
});
不过你的逻辑是有缺陷的。使用此代码,在触发足够的调整大小事件后,“.body”的高度将缩小到 0。
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)