雖然框架不利於網站優化，但在類似於業務系統的后台中使用的還比較頻繁。起初在寫的時候，框架的高度與寬度的兼容着實讓我很頭疼。經過多方面查找資料，及通過自己的實踐，特總結以下控制框架寬度與高度的方法。
主要是通過以下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看每段代碼的意思。。。根據自己實際情況進行取舍與修改~最后附上截圖，希望能幫到遇到此問題的各位~
