Question

在特定控件跨越屏幕宽度并创建水平滚动条之前，我遇到了问题。简单地将控件包含在<div style="overflow:auto;">中会修复它，以便只有该div的内容才能滚动。

这是我得到的：

整个页面都有一个水平滚动条，因此如果您滚动查看所有网格内容，则无法再在其上方的表格中看到搜索参数。

屏幕截图中包含网格的表格是这样创建的：

<div id="divPageControls" style="padding-right:0px; padding-bottom:15px">

<!-- the table(s) for the 'top half' of the application -->

<table width="100%" cellspacing="0" cellpadding="0" border="0" class="clsBorderColor" style="LEFT:10px; POSITION:relative; TOP:10px;">
    <tr>
        <td height="5px">
        </td>
    </tr>
    <tr>
        <td valign="top" align="center">
        <div style="overflow:auto;width:100%;">
            <asp:datagrid id="dgAuditlog" runat="server" HeaderStyle-CssClass="clsGridHeaderText" ItemStyle-CssClass="clsGridCellText" PageSize="10" bodyHeight="220px" width="98%" CssClass="tblScroll">
                <Columns>
                    <asp:TemplateColumn HeaderText="Select" ItemStyle-HorizontalAlign="Center" HeaderStyle-CssClass="clsGridHeaderText" ItemStyle-Wrap="False" HeaderStyle-Wrap="False">
                        <ItemTemplate>
                            <input type="checkbox" tabindex="-1" />
                        </ItemTemplate>
                    </asp:TemplateColumn>
                </Columns>
            </asp:datagrid>
        </div>
        </td>
    </tr>
    <tr>
        <td height="5px"></td>
    </tr>
</table>
</div>

我已经尝试移动div围绕网格，只包括td，tr，整个table。这要么没有任何区别，要么给我一些可能更不可用的东西：

滚动条会剪切网格，现在也有一个垂直的网格，而不是它＃34;下降＆＃34;填写页面。

任何人都有任何想法，我可以做的只是使包含此表的块具有水平滚动条，也不会＆＃34;收缩＆＃34;垂直？

编辑以下是弹出窗口中另一个网格的屏幕截图，其中只有网格滚动：

在这种情况下，它会垂直滚动，而不是水平滚动。但最终我的实际问题中的这个网格应该表现得一样;只有那个特定元素才能滚动，而不是整个页面。

Answer 1

你真的搞砸了你的问题..但我明白你想要一个身体部分不要滚动和滚动div。如果div id是#divPageControls。

您可以使用css属性，如：

       #divPageControls
        {
        overflow-x:auto;//If you want it to scroll Horizontally
        overflow-y:auto;//If you want it to scroll Vertically
        }
        body
        {
        overflow:hidden;
         } //Which will make body overflow hidden both horizontal and  vertical

希望它会有所帮助：）

Answer 2

好的，再次编辑：

<table style="width: 100%; table-layout: fixed;">
  <tr>
    <td>
      <div style="width: 100%; overflow: auto; background-color: #00F; height: 100px">
        Grid here ...
      </div>
    </td>
  </tr>
</table>

另见：How to stop table from resizing when contents grow?

如何在特定元素上滚动，而不是整个页面？

2 个答案: