如何将最大尺寸设置为包含 DIV 的 GridView答案

【问题标题】：How to make a GridView with maxmimum size set to the containing DIV如何将最大尺寸设置为包含 DIV 的 GridView
【发布时间】：2011-12-25 10:43:05
【问题描述】：

我想根据包含它的 DIV 来修复 GridView 的大小。我更改了所有可能的属性，但 gridview 没有任何变化。这是标记：

<table cellpadding="0" cellspacing="0" width="100%" style="height:100%">
<tr>
<td>
    <div style="width: 500px">
         <asp:GridView ID="GridView1" runat="server" 
                       AllowSorting="True" AutoGenerateColumns="False" 
                       DataSourceID="QuotationSQLDS" 
                       onrowdatabound="GridView1_RowDataBound"  
                       ForeColor="Black" Width="100%">
                <HeaderStyle HorizontalAlign="Center" Font-Size="8pt" />
                <Columns>
                     <asp:BoundField DataField="Id" HeaderText="Id" 
                                     ReadOnly="True" SortExpression="Id"/>
                     <asp:BoundField DataField="description" 
                                     HeaderText="Description" 
                                     SortExpression="description" />
                </Columns>
          </asp:GridView>
    </div>
</td>
</tr>

请帮帮我，因为我要踢我的笔记本电脑了。谢谢

【问题讨论】：

你看到了什么？在 div 周围添加边框
我看到边框的 div 只覆盖了 GridView 的某些部分。
你的问题有点混乱。你需要在这里做什么？你有不同宽度的div，需要根据每个div的大小来设置gridview的宽度吗？
我有你在问题中看到的标记。当表格超过 500 像素时，它不会缩小以适应 div 的尺寸，但会侵入其边框（右侧），因此要查看整个表格，我需要水平滚动。
好的，尝试将此样式添加到 div height:auto;浮动：左；溢出：隐藏；显示：块；

标签： asp.net css gridview html styles

【解决方案1】：

我认为如果您希望网格视图宽至 500 像素，它应该可以工作。是否比这更广泛？

【讨论】：

感谢您的回答。如果我减小 DIV 的大小，比如说 200px，它不会改变任何东西。这就是困扰我的问题！
尝试在 div 样式中使用 overflow:auto

【解决方案2】：

尝试做这样的事情

为gridview 和包含div 添加类

<div class="container" style="width: 500px">
         <asp:GridView ID="GridView1" runat="server" CssClass="gvData"
                       AllowSorting="True" AutoGenerateColumns="False" 
                       DataSourceID="QuotationSQLDS" 
                       onrowdatabound="GridView1_RowDataBound"  
                       ForeColor="Black">
                <HeaderStyle HorizontalAlign="Center" Font-Size="8pt" />
                <Columns>
                     <asp:BoundField DataField="Id" HeaderText="Id" 
                                     ReadOnly="True" SortExpression="Id"/>
                     <asp:BoundField DataField="description" 
                                     HeaderText="Description" 
                                     SortExpression="description" />
                </Columns>
          </asp:GridView>
    </div>

并使用jQuery 并执行以下操作：

$(document).ready(function () {
   var height = $('.container').height();
   $('.gvData').height(height);
});

在你的.css:

.container{height:auto; float:left;overflow:hidden;display:block;}

【讨论】：

与我没有脚本获得的结果相同