虽然框架不利于网站优化，但在类似于业务系统的后台中使用的还比较频繁。起初在写的时候，框架的高度与宽度的兼容着实让我很头疼。经过多方面查找资料，及通过自己的实践，特总结以下控制框架宽度与高度的方法。
主要是通过以下js控制框架的高度与宽度：
<script type=”text/javascript”>
$(function () {
layoutrezise();
AutoHeight();
})
function layoutrezise() {
var headerH = $(“div#Headbox”).height(); //获取头部的高度
var bodyerH = $(window).height() – headerH; //计算内容的高度（不包括头部）
$(“div#Bodybox,div#bleftBox,div#brightBox,iframe#leftiframe,iframe#mainframe”).height(bodyerH); //设置主框架的高度
$(“div#brightBox”).width($(window).width() – $(“div#bleftBox”).width()); //设置主框架的宽度
}
function AutoHeight() {
$(window).resize(function () {
layoutrezise();
})
}
</script>
$(function () {
layoutrezise();
AutoHeight();
})
function layoutrezise() {
var headerH = $(“div#Headbox”).height(); //获取头部的高度
var bodyerH = $(window).height() – headerH; //计算内容的高度（不包括头部）
$(“div#Bodybox,div#bleftBox,div#brightBox,iframe#leftiframe,iframe#mainframe”).height(bodyerH); //设置主框架的高度
$(“div#brightBox”).width($(window).width() – $(“div#bleftBox”).width()); //设置主框架的宽度
}
function AutoHeight() {
$(window).resize(function () {
layoutrezise();
})
}
</script>
页面的主要代码如下：
<body>
<div id=”Headbox” class=”clearfix”>
<h1 class=”fl”>业务系统</h1>
</div>
<div id=”Bodybox” class=”clearfix”>
<div id=”bleftBox” style=”width:225px; background:#e9e9eb;” class=”fl”>
<iframe id=”leftiframe” name=”leftiframe” style=”width:100%; border:0;” src=”HxLeft.html”></iframe>
</div>
<div id=”brightBox” class=”fl”>
<iframe id=”mainframe” name=”mainframe” style=”width:100%; border:0;” src=”SaveUser.html”></iframe>
</div>
<div class=”clear”></div>
</div>
</body>
<div id=”Headbox” class=”clearfix”>
<h1 class=”fl”>业务系统</h1>
</div>
<div id=”Bodybox” class=”clearfix”>
<div id=”bleftBox” style=”width:225px; background:#e9e9eb;” class=”fl”>
<iframe id=”leftiframe” name=”leftiframe” style=”width:100%; border:0;” src=”HxLeft.html”></iframe>
</div>
<div id=”brightBox” class=”fl”>
<iframe id=”mainframe” name=”mainframe” style=”width:100%; border:0;” src=”SaveUser.html”></iframe>
</div>
<div class=”clear”></div>
</div>
</body>
大家可以通过div的结构对就js看每段代码的意思。。。根据自己实际情况进行取舍与修改~最后附上截图，希望能帮到遇到此问题的各位~
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
发布者：全栈程序员-用户IM，转载请注明出处：https://javaforall.cn/109257.html原文链接：https://javaforall.cn
【正版授权，激活自己账号】： Jetbrains全家桶Ide使用，1年售后保障，每天仅需1毛
【官方授权 正版激活】： 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...