1、問題：經常用到gridview因為列太多 導致撐大瀏覽器出現瀏覽器窗口級別的滾動條；
2、續上面的問題：這個時候需要在gridview外面嵌套一個div 當div設置具體的寬度，那么無論里面的gridview有多少列 有多寬 都不會導致窗口出現滾動條 只可能讓div出現滾動條， 這樣在用戶體驗方面 可以更加好些；
3、因為div要設置具體的寬度 所以不同的顯示器下面 這樣的顯示效果不一樣；有的很難看、有的不錯；
4、根據以上問題 可以通過javascript 在窗體的resize事件中 動態設定div的大小；
這樣顯示會更加美觀些……
一、Html頁面：
<inputtype="text"name="availHeight"size="4"/><br/>
<inputtype="text"name="availWidth"size="4"/><br/>
<divid="div1"style="background-color:Gray; width:616px; height: 305px;"></div>
注：三個html控件 動態將當前窗口的高度、寬度寫入 input 輸入框里面；
動態改變div1 的寬度；
二、javascript代碼：
<scripttype="text/javascript">
var winWidth=0;
var winHeight=0;
function findDimensions() { //函數：獲取尺寸
//獲取窗口寬度
if (window.innerWidth) {
winWidth = window.innerWidth;
}
elseif ((document.body) && (document.body.clientWidth)) {
winWidth = document.body.clientWidth;
}
//獲取窗口高度
if (window.innerHeight) {
winHeight = window.innerHeight;
}
elseif ((document.body) && (document.body.clientHeight)) {
winHeight = document.body.clientHeight;
}
//通過深入Document內部對body進行檢測，獲取窗口大小
if (document.documentElement && document.documentElement.clientHeight && document.documentElement.clientWidth) {
winHeight=document.documentElement.clientHeight;
winWidth=document.documentElement.clientWidth;
}
//結果輸出至兩個文本框
document.form1.availHeight.value=winHeight;
document.form1.availWidth.value = winWidth;
//設置div的具體寬度=窗口的寬度的%
if (document.getElementById("div1")) {
document.getElementById("div1").style.width = winWidth*0.98 + "px";
}
}
findDimensions();
window.onresize=findDimensions;
</script>
三、注意要點：因為是要先有div1出現 然后 javascript 腳本改變 它的大小 ；所以javascript腳本 最好放在 最后面；
四、Demo源碼：
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>窗口大小</title>
</head>
<body>
<h2 align="center">請調整瀏覽器窗口大小</h2>
<hr/>
<form action="#"method="get"name="form1"id="form1">
<!--顯示瀏覽器窗口的實際尺寸-->
瀏覽器窗口的高度：<input type="text"name="availHeight"size="4"/><br/>
瀏覽器窗口的寬度：<input type="text"name="availWidth"size="4"/><br/>
</form>
<div id="div1"style="background-color:Gray; width:616px; height: 305px;"></div>
<script type="text/javascript">
var winWidth=0;
var winHeight=0;
function findDimensions() { //函數：獲取尺寸
//獲取窗口寬度
if (window.innerWidth) {
winWidth = window.innerWidth;
}
elseif ((document.body) && (document.body.clientWidth)) {
winWidth = document.body.clientWidth;
}
//獲取窗口高度
if (window.innerHeight) {
winHeight = window.innerHeight;
}
elseif ((document.body) && (document.body.clientHeight)) {
winHeight = document.body.clientHeight;
}
//通過深入Document內部對body進行檢測，獲取窗口大小
if (document.documentElement && document.documentElement.clientHeight && document.documentElement.clientWidth) {
winHeight=document.documentElement.clientHeight;
winWidth=document.documentElement.clientWidth;
}
//結果輸出至兩個文本框
document.form1.availHeight.value=winHeight;
document.form1.availWidth.value = winWidth;
//設置div的具體寬度=窗口的寬度的%
if (document.getElementById("div1")) {
document.getElementById("div1").style.width = winWidth*0.98 + "px";
}
}
findDimensions();
window.onresize=findDimensions;
</script>
</body>
</html>