当它有很多列时，Asp.net gridview 会溢出父 div

Question

我正在尝试使用相对宽度使 gridview 适合 div ，但是当它有太多列时，它总是会破坏其父容器。

我知道使用这样的固定宽度显然可以解决问题，但如果我稍微调整窗口大小，gridview 将再次溢出，因为它具有特定宽度。

<div style="overflow: scroll; width: 1000px; Height: 300px;">
   <asp:GridView id="GridView1" runat="server"  />
</div>

有什么方法可以指定容器的相对值并使用溢出：滚动，这样如果我重新调整窗口大小，gridview 将重新调整其容器的大小。

以下是使用width:100% 时发生的一些图片 我在这里注意到的一件事是，当窗口为 100% 缩放时，gridview 会溢出其容器，但随着我减小缩放，问题似乎消失了。真的很奇怪：S

如果有人可以在这里提供帮助，我将不胜感激。

100% 缩放

75% 缩放

65% 缩放

Answer 1

您是否尝试过将宽度设置为 % 来代替像素... 例如：- 宽度：90% 当我们将宽度设置为像素时，它将是固定大小，但将其设置为百分比会根据容器的宽度改变宽度

Answer 2

抱歉，我已经厌倦了寻找 CSS 解决方案。 所以我最终像这样使用jQuery：

<script type="text/javascript">

        $(document).ready(function () {
            bindEvents();
        });
        function bindEvents() {
            $(window).on('resize', function () {
                adjustNewSize();
            });
        }
        function adjustNewSize() {

            var parentContainer = $("#divParentContainer");
            var gridContainer = $("#divGridContainer");           
            $(parentContainer).width("80%");        
            $(gridContainer).width(($(parentContainer).width()));

        }       

    </script>

以及下面Toolkit:ToolkitScriptManager下面的脚本

<Toolkit:ToolkitScriptManager ID="YourToolKitID" runat="server">
    </Toolkit:ToolkitScriptManager>
    <script type="text/javascript">
        var prm = Sys.WebForms.PageRequestManager.getInstance();

        prm.add_endRequest(function () {
            bindEvents();
        });
    </script>

这在 IE、Mozilla 和 Chrome 上效果很好，但浏览器的最小化/最大化按钮有时似乎不会触发调整大小事件。我说，似乎，因为事件实际上被触发了，但是当我手动更改浏览器的大小时，div 并没有像它们那样进行调整。

Answer 3

你可以试试overflow-x: auto

<div style="overflow-x: auto; width: 1000px; Height: 300px;">
   <asp:GridView id="GridView1" runat="server"  />
</div>

但从您的屏幕截图看来，不仅网格而且表单 div 和表单上方的其他一些 div 也溢出了。在这种情况下，您可以相应地设置父 div 的 overflow-x 属性。