当可见溢出时，如何防止div中包含的gridview被页脚覆盖 [英] How to prevent gridview contained in div from being overlayed by footer when overflow is visible

问题描述

我已经在其他一些论坛上发布了这个问题，但没有得到任何回复.

我也尝试过在线搜索答案，但是找不到答案.基本上，我有一个网页，可以在gridview中显示一些帐户信息.最终用户可以按各种标题字段对数据进行排序，我有一个按钮可以在其中打印出所有数据.最初，我启用了页面调度，但被要求删除它并添加滚动条.

因此，我创建了一个包含表标题信息的表，并将其放在gridview的顶部，然后将gridview添加到div内，并设置溢出以获取滚动条.当最终用户单击打印"按钮时，我遇到了问题.

当溢出设置为可见时，页脚将显示在gridview内容的顶部.在启用和禁用gridview上的页面调度时，我没有这个问题.

我有一个定义页脚的母版页.当最终用户单击打印"按钮时，页面将显示上溢，并显示打印弹出窗口，然后将页面重置为不显示div中的上溢.

我有一个用于打印的单独的样式表.有什么办法可以解决这个问题吗?我尝试设置z-index，但没有用.我还尝试根据gridview中的条目数来动态计算高度，这似乎也不起作用.我已经看了一段时间了，被卡住了.这是我的第一个asp.net项目.

我在下面包括了一些代码片段.在此先感谢您的帮助！
StyleSheet中的代码:

I have posted this question in a few other forums and have not gotten any replies.

I have also tried searching online for an answer and have not been able to find one. Basically, I have a webpage where I display some account information in a gridview. The end user can sort the data by the various header fields and I have a button where they can print out all of the data. Initially, I had paging enabled but was asked to remove it and add a scrollbar instead.

So I created a table that contained the table header information and placed it on top of the gridview and added the gridview inside of a div and set the overflow to get the scrollbar. I am running into problems when the end user clicks on the print button.

When the overflow is set to be visible, the footer is displayed on top of the gridview contents. I did not have this problem when I was enabling and disabling the paging on the gridview.

I have a master page where the footer is defined. When the end user clicks on the print button, the page is displayed with the overflow, the print popup is displayed, and then the page is reset back to not displaying the overflow in the div.

I have a separate stylesheet that I am using for the printing. Is there someway that I can fix this problem? I have tried setting the z-index and that did not work. I also tried dynamically calculating the height based on how many entries in the gridview and that didn''t seem to work either. I have been looking at this for a while and am stuck. This is my first asp.net project.

I have included some code snippets below. Thanks in advance for your help!
Code in StyleSheet:

#footer  
{ 
  position: absolute; 
  bottom: 0; 
  width:100%; 
  height: 50px; 
  background-color: #4E7DD1; 
  clear: both; 
  text-align: center; 
  color: #B6CEF9; 
  font-family: verdana, arial, sans-serif; 
  font-size: 11px; 
  line-height: 18px; 
} 

div上用于CSS的CSS:

CSS on div for gridview:

<div id="ListAllAccountsResultsDiv" style="min-height:300px;max-height:300px;width:1015px;overflow:auto;text-align:left;z-index:2"  runat="server">

Page_Load中的代码:

Code in Page_Load:

if (IsPostBack) 
{ 
     object ctl = this.FindControl(this.Request.Params.Get("__EVENTTARGET")); 
     if (ctl.GetType().ToString() == "System.Web.UI.WebControls.LinkButton") 
     { 
            System.Web.UI.WebControls.LinkButton lb = (System.Web.UI.WebControls.LinkButton)ctl; 
            System.Web.UI.Control divResults = Page.FindControl("ListAllAccountsResultsDiv"); 
                                                 
             if (lb.ID == this.listAllAcctsBtnPrinterFriendlyFormat.ID) 
             { 
                  if(ListAllAccountsResultsDiv.Style["overflow"].Equals("auto"))
                  { 
                       ListAllAccountsResultsDiv.Style.Remove("overflow"); 
                       ListAllAccountsResultsDiv.Style.Add("overflow", "visible"); 
                       ListAllAccountsButtons.Style.Add("display", "none"); 
                       String cstext = "window.print();setTimeout(\"__doPostBack('" + this.listAllAcctsBtnPrinterFriendlyFormat.UniqueID + "','')\",1000);"; 
                       ScriptManager.RegisterStartupScript(this.Page, this.GetType(), "PopupScript", cstext, true); 
                  }                             
                  else 
                  {                                 
                       ListAllAccountsResultsDiv.Style.Remove("overflow"); 
                       ListAllAccountsResultsDiv.Style.Add("overflow", "auto"); 
                       ListAllAccountsButtons.Style.Remove("display");                         
                   } 
              } 
        } 
 }

推荐答案

您是否尝试过从ListAllAccountsResultsDiv删除max-height:300px样式?

Have you tried removing the max-height:300px style from the ListAllAccountsResultsDiv?

这篇关于当可见溢出时，如何防止div中包含的gridview被页脚覆盖的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！