当我设置宽度时，为什么 GridView 宽度没有在页面上扩展 100%？答案

【问题标题】：Why isn't the GridView width expanding 100% across the page when I set the width?当我设置宽度时，为什么 GridView 宽度没有在页面上扩展 100%？
【发布时间】：2009-05-15 15:10:05
【问题描述】：

我有以下标记，我从 div 中取出了多余的东西，所以更容易理解。我使用可折叠面板扩展器将 GridView 设置为 100%，它在页面上显示良好。然后，不用做可折叠面板扩展器和使用手风琴面板，gridview 只会根据需要扩展，无论我将宽度设置为什么。这是下面的标记：

<div>
    <cc1:Accordion ID="Accordion1" runat="server" SelectedIndex="0"
                   HeaderCssClass="collapsePortfolioHeader"
                   FadeTransitions="true" 
                   FramesPerSecond="40" 
                   TransitionDuration="250" 
                   AutoSize="None">
        <Panes>
            <cc1:AccordionPane runat="server">
                <Header>
                    Create Portfolio</Header>
                <Content>
                    <br />
                    <div style="height: 290px;">
                        <div style="float: left; width: 250px; 
                                    margin-right: 75px;">
                        </div>
                        <div style="float: left; width: 250px;">
                        </div>
                        <div style="float: left; width: 70px; 
                                    margin: 5px;">
                        </div>
                        <div style="float: left; width: 250px; 
                                    margin: 5px;">

                        </div>
                        <div class="clear"> //just a clear both;
                        </div>
                    </div>
                </Content>
            </cc1:AccordionPane>
            <cc1:AccordionPane runat="server">
                <Header>
                    Create Portfolio By Location</Header>
                <Content>

                    <div style="height: 150px;">
                        <div style="float: left; width: 170px; 
                                    margin: 5px;">

                        </div>
                        <div style="float: left; 
                                    margin-right: 5px;">
                        </div>
                        <div style="float: left; width: 250px;
                                    margin-right: 5px;">

                        </div>
                        <div style="float: left; width: 70px; 
                                    padding-top: 100px;">
                        </div>
                        <div style="float: left; width: 250px; 
                                    margin-left: 15px;">

                        </div>
                        <div class="clear">
                        </div>
                    </div>
                </Content>
            </cc1:AccordionPane>
        </Panes>
    </cc1:Accordion>
</div>

<div class="grid"> //the grid class just has margin:0;
// GridView goes here
</div>

【问题讨论】：

我把它拿出来是因为这个问题没有必要。我很好奇我的标记或手风琴是否在限制 GridView 的宽度。
你有一个包含表格宽度的css类吗？这可能是原因
不，它以前工作过并且正在其他页面上工作。
你有没有弄清楚是什么原因？谢谢
还没有。我会尽快通知你。

标签： asp.net css gridview

【解决方案1】：

赛软，

不确定您的环境有什么不同。但是我使用了您在问题中粘贴的代码，添加了一个网格视图，用一些测试数据填充它并将宽度设置为 100%，它跨越了整个页面。我能想到的唯一一件事是你的 CSS 中有一些东西可能会导致它。它适用于不同页面的事实意味着它可能不是 CSS（嗯）。可能是此页面的本地内容？

我认为这与手风琴无关。

看看下面复制的代码，这是我在我的测试项目中的代码，它有效。

我建议从没有 CSS 的新页面开始，然后从那里开始。如果没有看到你的整个 CSS，这将很难回答。

<div>
            <ajaxToolkit:Accordion ID="Accordion1" runat="server" SelectedIndex="0" HeaderCssClass="collapsePortfolioHeader"
                FadeTransitions="true" FramesPerSecond="40" TransitionDuration="250" AutoSize="None">
                <Panes>
                    <ajaxToolkit:AccordionPane runat="server">
                        <Header>
                            Create Portfolio</Header>
                        <Content>
                            <br />
                            <div style="height: 290px;">
                                <div style="float: left; width: 250px; margin-right: 75px;">
                                </div>
                                <div style="float: left; width: 250px;">
                                </div>
                                <div style="float: left; width: 70px; margin: 5px;">
                                </div>
                                <div style="float: left; width: 250px; margin: 5px;">
                                </div>
                                <div class="clear">
                                </div>
                            </div>
                        </Content>
                    </ajaxToolkit:AccordionPane>
                    <ajaxToolkit:AccordionPane runat="server">
                        <Header>
                            Create Portfolio By Location</Header>
                        <Content>
                            <div style="height: 150px;">
                                <div style="float: left; width: 170px; margin: 5px;">
                                </div>
                                <div style="float: left; margin-right: 5px;">
                                </div>
                                <div style="float: left; width: 250px; margin-right: 5px;">
                                </div>
                                <div style="float: left; width: 70px; padding-top: 100px;">
                                </div>
                                <div style="float: left; width: 250px; margin-left: 15px;">
                                </div>
                                <div class="clear">
                                </div>
                            </div>
                        </Content>
                    </ajaxToolkit:AccordionPane>
                </Panes>
            </ajaxToolkit:Accordion>
        </div>
        <div class="grid">
            <asp:GridView ID="GridView1" runat="server" Width="100%">
            </asp:GridView>
        </div>

【讨论】：

好的，我会继续调查的。
酷，发现后发表评论。我很想知道问题是什么。
这是一个 css 问题，我将 GridView Css 类设置为一个名为 DataTable 的类和一个在 DataTable td 中的类，我将宽度设置为 100% 并且它工作。感谢您的帮助。