頁面中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都支持。