如何根据浏览器设置div的大小 [英] How to set the size of the div based on the browser
本文介绍了如何根据浏览器设置div的大小的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
大家好，
在我的项目中，当我单击按钮时，进度条将显示，并且它阻止了背景窗口，因此我正在使用进度条.我已经通过宽度和高度控件设置了div大小.在这种情况下，我想根据浏览器设置宽度和高度.我也遇到一些问题，例如进度栏显示在IE6下拉列表的后面.谁能帮我解决这个问题.这是代码:
Hi All,
In my project I am using progress bar when I click the button the progress bar will display and it blocks the background window. I have set the div size with the help of width and height controls. In this I like to set the width and height based on the browser. Also I am having some issues like the progressbar is displaying behind the dropdown in IE6. can any one help me to solve this problem. Here is the code:
<%@ Page Language="VB" MasterPageFile="~/MasterPage.master" AutoEventWireup="false" CodeFile="fp_t012stk.aspx.vb" Inherits="fp_t012stk" title="Current Stock Report" %>
<%@ Register Assembly="CrystalDecisions.Web, Version=10.2.3600.0, Culture=neutral, PublicKeyToken=692fbea5521e1304"
Namespace="CrystalDecisions.Web" TagPrefix="CR" %>
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %>
<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
<script type="text/JavaScript" language="JavaScript">
function ShowProgress()
{
document.getElementById(''<% Response.Write(UpdateProgress1.ClientID)%>'').style.display = "inline";
}
</script>
<asp:ScriptManager id="ScriptManager1" AsyncPostBackTimeout="0" runat="server">
<asp:UpdatePanel id="UpdatePanel1" runat="server">
<contenttemplate>
<table cellspacing="0"><tbody><tr><td colspan="3">
<hr class="css_horizontalruleUp" />
<table cellspacing="0"><tbody><tr><td align="right"><asp:Label id="Label1" runat="server" CssClass="css_HeaderLabel" __designer:wfdid="w118" Text="Current Stock" Width="100px"></td><td><asp:Panel id="Panel1" runat="server" CssClass="css_panel" __designer:wfdid="w119" BackColor="White"> <table><tbody><tr><td align="right"><asp:Label id="Label3" runat="server" CssClass="css_normalLabel" __designer:wfdid="w120" Text="*Product Family" Width="90px"></td><td style="WIDTH: 100px" align="left"><asp:DropDownList id="droProdFamily" runat="server" CssClass="css_dropdown" __designer:wfdid="w121" Width="275px" AutoPostBack="True">
</td><td style="WIDTH: 148px" align="right"><asp:Label id="Label5" runat="server" CssClass="css_normalLabel" __designer:wfdid="w122" Text="*Product:"></td><td align="left" colspan="5"><asp:DropDownList id="droProduct" runat="server" CssClass="css_dropdown" __designer:wfdid="w123" Width="275px">
</td></tr><tr><td align="right"><asp:Label id="Label7" runat="server" CssClass="css_normalLabel" __designer:wfdid="w124" Text="*Branch:" Width="1px"></td><td align="left"><asp:DropDownList id="Drp_Branch" runat="server" CssClass="css_dropdown" __designer:wfdid="w125" Width="272px" AutoPostBack="True">
</td><td style="WIDTH: 148px" align="left"></td><td align="left"></td><td align="left"></td><td align="left"></td><td align="left"></td><td align="left"></td></tr><tr><td align="right"><asp:Label id="Label4" runat="server" CssClass="css_normalLabel" __designer:wfdid="w126" Text="*Warehouse:" Width="90px"></td><td align="left"><asp:DropDownList id="Drp_Ware_CD" runat="server" CssClass="css_dropdown" __designer:wfdid="w127" Width="275px" AutoPostBack="True">
</td><td style="WIDTH: 148px" align="right"><asp:Label id="Label2" runat="server" CssClass="css_normalLabel" __designer:wfdid="w128" Text="*Stock Type:" Width="75px"></td><td align="left"><asp:DropDownList id="Drp_Stk_Type" runat="server" CssClass="css_dropdown" __designer:wfdid="w129" Width="93px">
<asp:ListItem>All
<asp:ListItem Value="G">Good
<asp:ListItem Value="D">Defective
<asp:ListItem Value="A">OOW Good
<asp:ListItem Value="B">OOW Defective
</td><td align="left"> <asp:Label id="Label8" runat="server" CssClass="css_normalLabel" __designer:wfdid="w130" Text=" Serial # Required ?:" Width="115px"></td><td align="left"><asp:DropDownList id="Drp_Uslno_ID" runat="server" CssClass="css_dropdown" __designer:wfdid="w131">
<asp:ListItem Value="N">No
<asp:ListItem Value="Y">Yes
</td><td align="left">
<asp:Button id="btnReport" runat="server" CssClass="css_button" __designer:wfdid="w132" Text="PRINT" OnClientClick="ShowProgress()"></td><td align="left"><asp:Button id="btnExcel" runat="server" CssClass="css_button" __designer:wfdid="w133" Text="Excel"></td></tr></tbody></table> </td><td></td></tr></tbody></table>
<hr class="css_horizontalruleDown" />
<asp:Label id="lblmsg" tabIndex=-1 runat="server" ForeColor="Red" Font-Bold="True" CssClass="css_MessageLabel" __designer:wfdid="w134"></td></tr><tr><td style="HEIGHT: 14px" colspan="3"></td></tr><tr><td align="left" colspan="3"> <table cellspacing="0" cellpadding="0"><tbody><tr><td><CR:CrystalReportViewer id="CrystalReportViewer1" runat="server" ReportSourceID="CrystalReportSource1" AutoDataBind="true" __designer:wfdid="w135" DisplayGroupTree="False" EnableDatabaseLogonPrompt="False" HasCrystalLogo="False" HasDrillUpButton="False" HasExportButton="False" HasGotoPageButton="False" HasPageNavigationButtons="False" HasSearchButton="False" HasToggleGroupTreeButton="False" HasViewList="False" HasZoomFactorList="False"> </td></tr></tbody></table></td></tr></tbody></table>
</contenttemplate>
<triggers>
<asp:PostBackTrigger ControlID="btnReport">
<asp:PostBackTrigger ControlID="btnExcel">
</triggers>
<CR:CrystalReportSource ID="CrystalReportSource1" runat="server">
<report filename="rp_t012stk.rpt">
</report>
<CR:CrystalReportPartsViewer ID="CrystalReportPartsViewer1" runat="server" AutoDataBind="true"
ReportSourceID="CrystalReportSource1" />
<br />
<asp:UpdateProgress id="UpdateProgress1" AssociatedUpdatePanelID="UpdatePanel1" runat="server" DisplayAfter="0">
<progresstemplate>
<div id="Layer1" runat="server" style="top:45px; left:0px; width:76%; height:70em; z-index:1000; background:gray; display:block; vertical-align:middle; text-align:center; padding:140px; font: 18px/1.6 Times New Roman; margin:0px auto; background-color:Gray; filter: alpha(opacity=50); opacity:0.4; width:76%; height:70em; overflow:auto; text-decoration:none; color:Black; position:absolute; top:0px; left:0%; margin-left:-10px">
<asp:Image ID="imgloading" runat="server" ImageUrl="~/images/ajax-loader5.gif" /><br />
</progresstemplate>
<br />
请帮帮我.
在Advance中致谢
Please help me.
Thanks in Advance
推荐答案
您可以实现类似
通常将div宽度设置为100%.它将根据浏览器大小进行调整.关于此，尝试将进度条显示为对话框.这是示例对话框 [jQuery对话框] [Usually set thedivwidth to100%. It will be adjust based on the browser size. Regarding this try to display the progressbar as dialog. Here is sample dialog [jQuery Dialog][^]. This will avoid displaying behind the dropdown.
尝试为Layer1 div提供z-index:2147483647，以避免进度条显示在下拉菜单的后面Try to providez-index:2147483647for Layer1 div inorder to avoid progressbar displaying behind the dropdown
这篇关于如何根据浏览器设置div的大小的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
