页脚重叠动态生成的表答案

【问题标题】：Footer Overlapping Dynamically Generated Table页脚重叠动态生成的表
【发布时间】：2010-12-08 11:46:57
【问题描述】：

在我正在处理的一个 aspx 页面上，正在服务器端生成一个表，并且在页面上看起来很好。此外，在此页面上，还有一个小页脚。最终结果是，当表格中的内容变得足够长时，表格会延伸到页脚之外，但页脚不会将自身重新定位在表格底部。我需要在表格周围的 div 或页脚周围的样式中添加什么样的 CSS 魔法才能使事情正常进行？

这里是一些有问题的代码：

<div id="contentPlusFooter">
                <div id="content" class="ContentWidth">
                    <div style="margin-left: 10px;">
                        <div id="contentBanner" class="insideContentWidth">
                            <span class="contentBannerTitle">Inventory Tracking Report:</span>
                        </div>
                        <asp:Repeater ID="rptInventory" runat="server">
                            <ItemTemplate>
                                <asp:GridView ID="gvInventory" runat="server" CssClass="insideContentWidth" GridLines="None"
                                    AllowPaging="True" AllowSorting="True" AutoGenerateColumns="False" PageSize="20"
                                    EmptyDataText="No inventory items found">
                                    <RowStyle CssClass="rowStyle" />
                                    <AlternatingRowStyle CssClass="altRowStyle" />
                                    <HeaderStyle CssClass="tableHeader" HorizontalAlign="left" />
                                    <Columns>
                                        <asp:BoundField DataField="Description" HeaderText="Description" SortExpression="Description" />
                                        <asp:BoundField DataField="MinInventoryLevel" HeaderText="Minimum Inventory Level"
                                            SortExpression="MinInventoryLevel" />
                                        <asp:BoundField DataField="CurrentInventoryLevel" HeaderText="Current Inventory Level"
                                            SortExpression="CurrentInventoryLevel" />
                                        <asp:TemplateField HeaderText="Inventory Start Date" SortExpression="InventoryStartDate">
                                            <ItemTemplate>

                                            </ItemTemplate>
                                        </asp:TemplateField>
                                    </Columns>
                                </asp:GridView>
                                <br />
                            </ItemTemplate>
                        </asp:Repeater>
                    </div>
                </div>
                <rw:adminfooter id="Footer" runat="server" />
            </div>

【问题讨论】：

你在什么版本的浏览器中测试过这个？
该应用程序目前仅在 IE7 中测试，因此其他浏览器无关紧要。（如果由我决定，就不会这样了，但你能做什么......）
我们还需要相关的 CSS。

标签： html asp.net footer

【解决方案1】：

我会将您的页眉、内容和页脚包装在一个 3 行表格中。

【讨论】：

嗯，试了3行表，还是不行。相反，页脚会与内容重叠，并且还会阻止显示在其下方的任何内容。不过感谢您的建议。
你的 CSS 中可能定义了一个浮动 div。

【解决方案2】：

不是理想的解决方案，但我只是将页脚向上移动到主要内容 div 中。有点 hack，但它看起来不错并且功能得以保留。有时与 css 战斗是不值得的......

【讨论】：