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

转载于:https://www.cnblogs.com/lxc89/p/3468907.html