87,904
社区成员
发帖
与我相关
我的任务
分享如何用jquery动态改变div的高度？
想要做一个可滚动的DIV区域，但因为是高度被定死了，当屏幕高分辩率高是DIV下面一大片空白，现在就想用jquery来动态设定这个高度直到DIV到达页面最下端。
代码如下：
<html>
<head>
<title>无标题页</title>
<script src="js/jquery-1.8.3.min.js" type="text/javascript"></script>
</head>
<body>
<div>
<a>这是页面头部</a>
<br />
<br />
<br />
<br />
<br />
<br />
</div>
<div style="overflow:scroll; height:400px; width:100%; background-color:Silver;">
<a>这是可滚动的区域</a><br /><br /><br /><br />
<a>这是可滚动的区域</a><br /><br /><br /><br />
<a>这是可滚动的区域</a><br /><br /><br /><br />
<a>这是可滚动的区域</a><br /><br /><br /><br />
<a>这是可滚动的区域</a><br /><br /><br /><br />
<a>这是可滚动的区域</a><br /><br /><br /><br />
<a>这是可滚动的区域</a><br /><br /><br /><br />
<a>这是可滚动的区域</a><br /><br /><br /><br />
<a>这是可滚动的区域</a><br /><br /><br /><br />
</div>
</body>
</html>
代码如下：
<html>
<head>
<title>无标题页</title>
<script src="js/jquery-1.8.3.min.js" type="text/javascript"></script>
</head>
<body>
<div>
<a>这是页面头部</a>
<br />
<br />
<br />
<br />
<br />
<br />
</div>
<div style="overflow:scroll; height:400px; width:100%; background-color:Silver;">
<a>这是可滚动的区域</a><br /><br /><br /><br />
<a>这是可滚动的区域</a><br /><br /><br /><br />
<a>这是可滚动的区域</a><br /><br /><br /><br />
<a>这是可滚动的区域</a><br /><br /><br /><br />
<a>这是可滚动的区域</a><br /><br /><br /><br />
<a>这是可滚动的区域</a><br /><br /><br /><br />
<a>这是可滚动的区域</a><br /><br /><br /><br />
<a>这是可滚动的区域</a><br /><br /><br /><br />
<a>这是可滚动的区域</a><br /><br /><br /><br />
</div>
</body>
</html>
...全文
请发表友善的回复…
发表回复
glassy2000 2014-04-03
- 打赏
- 举报
终于调试出来了，IE下没问题，但FF下还是不行，有谁能改改让它也支持FF
<html>
<head>
<title>无标题页</title>
<script src="js/jquery-1.8.3.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(window).resize(function() {
setDivMaxHeight();
});
function setDivMaxHeight() {
var wh = window.screen.height;
var ph = $(document).height();
var bh = $(document.body).height();
var hr = $("#header").height();
var h = parseInt(bh) - parseInt(hr) - 5;
$("#footer").css("height", h);
}
</script>
</head>
<body style="margin-top:0px; margin-bottom:0px; margin-left:0px; margin-right:0px;" onload="setDivMaxHeight();" onresize="setDivMaxHeight();">
<div id="header" style="background-color:Green;">
<a>这是页面头部</a>
<br />
<br />
<br />
<br />
<br />
<br />
<div style="margin-top:20px; padding-top:20px;">
<br />
</div>
</div>
<div id="footer" style="overflow:scroll; height:400px; width:100%; background-color:Silver;">
<a>这是可滚动的区域</a><br /><br /><br /><br />
<a>这是可滚动的区域</a><br /><br /><br /><br />
<a>这是可滚动的区域</a><br /><br /><br /><br />
<a>这是可滚动的区域</a><br /><br /><br /><br />
<a>这是可滚动的区域</a><br /><br /><br /><br />
<a>这是可滚动的区域</a><br /><br /><br /><br />
<a>这是可滚动的区域</a><br /><br /><br /><br />
<a>这是可滚动的区域</a><br /><br /><br /><br />
<a>这是可滚动的区域</a><br /><br /><br /><br />
</div>
</body>
</html>
豪情 2014-04-03
- 打赏
- 举报
还需要加上
$(window).resize(function(){
var a=$(window).height()
$('div').css('height',a)
});
glassy2000 2014-04-03
- 打赏
- 举报
这个不行，还要减去头部那个DIV的高度吧
问天玄铁 2014-04-03
- 打赏
- 举报
$(function(){
var a=$(window).height()
$('div').css('height',a)
});
