頁面中DIV橫向滾動

某些時候頁面可能要顯示多個信息，那么頁面不夠寬的話就會撐出來，是頁面可以橫向滾動，但那是不美觀的，解決的辦法可以內嵌iframe，或者設置DIV樣式。

內嵌iframe時，如果沒有參數傳遞，或者參數過少的話會和方便，處理起來也比較容易。但是如果參數過多的話，就會比較繁瑣了，那么設置DIV橫向滾動的話就可以解決這個麻煩了。

效果圖如下：

下面上代碼了，首先HTML代碼：

<div id="divScroll" style="overflow-x: scroll; overflow-y: auto;position: relative;">
        <div style="position: absolute;">
                <table id="contrlist" style="width: 2000px; text-align: center;" cellspacing="0"
                    cellpadding="0" class="formcount content">
                    <tr>
                        <th width="50px" rowspan="2">
                            序號
                        </th>
                        <th width="110px" rowspan="2">
                            合同編號
                        </th>
                        <th width="200px" rowspan="2">
                            合同名稱
                        </th>
                        <th width="100px" rowspan="2">
                            合同開始
                        </th>
                        <th width="100px" rowspan="2">
                            合同結束
                        </th>
                        <th width="130px" rowspan="2">
                            合同額（含稅）
                        </th>
                        <th width="70px" rowspan="2">
                            稅種
                        </th>
                        <th width="100px" rowspan="2">
                            簽署日期
                        </th>
                        <th width="150px" rowspan="2">
                            客戶名稱/供應商
                        </th>
                        <th colspan="3">
                            關聯項目
                        </th>
                        <th colspan="2">
                            已收款情況
                        </th>
                        <th colspan="2">
                            應收款情況
                        </th>
                    </tr>
                    <tr>
                        <th width="200px">
                            項目名稱
                        </th>
                        <th width="150px">
                            項目編號
                        </th>
                        <th width="200px">
                            項目經理
                        </th>
                        <th width="110px">
                            收/付額
                        </th>
                        <th width="110px">
                            收/付比例
                        </th>
                        <th width="110px">
                            收/付額
                        </th>
                        <th width="110px">
                            收/付比例
                        </th>
                    </tr>
                    <tr id="trnull">
                        <td align="center" colspan="16">
                            暫無記錄
                        </td>
                    </tr>
                </table>
        </div>
    </div>

兩層div嵌套，外層允許滾動，內層用來固定位置。還有一段JS代碼用來控制外層DIV的高度，如果沒有，會看不到DIV中的內容

 $(function () {
            $('#divScroll').height(document.documentElement.clientHeight - 310);
        });

寫在最后：親測 IE8（包括兼容和正常模式），chrome，火狐，360安全瀏覽器6.3都支持。