Question

我试图使用相对宽度在div中使用gridview，但是当它有太多列时，它总是会突破其父容器。

我知道使用这样的固定宽度显然可以解决问题，但如果我稍微调整窗口大小，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

您可以尝试overflow-x: auto

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

但是从你的截图中看来，不仅网格而且形式div和上面的其他div形式也是溢出的。在这种情况下，您可以相应地设置父div的overflow-x属性。

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

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

更改宽度

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

3 个答案: