開發過程中，經常會做一些查詢，比如頁面上方選擇條件，下面顯示查詢結果.
如果查詢結果過多，那頁面的右邊捲軸就開始工作，造成查看下面查詢結果時，條件選擇項就不可見了（被拖到了上方可視範圍之外）
利用一句簡單的DIV就可以防止這種狀況發生.
Site.css:
- .divfix
- {
- height: 200px;
- width: 100%;
- overflow:scroll;
- position: absolute;
-
- }
- TH { Z-INDEX: 49 ; TOP: expression(this.offsetParent.scrollTop-1) ; POSITION: relative;}
Html:
- <html xmlns="http://www.w3.org/1999/xhtml">
- <head runat="server">
- <title>Untitled Page</title>
- <link id="Link1" type="text/css" href="site.css" runat="server" rel="stylesheet" />
- <script type="text/javascript">
- function show()
- {
- document.getElementById("mydiv").style.display="block";
- }
- </script>
- </head>
- <body>
- <form id="form1" runat="server">
- <asp:ScriptManager ID="ScriptManager1" runat="server" />
- <asp:Button ID="Button1" runat="server" OnClientClick="show()" OnClick="Button1_Click" Text="Button" />
- <div>
- <asp:UpdatePanel ID="UpdatePanel1" runat="server">
- <ContentTemplate>
- <div id="mydiv" runat="server" style="display:none; left:50%">
- <img src="waiting.gif" />
- </div>
- <div class="divfix">
- <asp:GridView ID="gvshow" runat="server" AutoGenerateColumns="False"
- Width="881px" Height="270px" CellPadding="4" ForeColor="#333333">
- <Columns>
- <asp:TemplateField>
- <ItemTemplate>
- <asp:Button ID="btnedit" runat="server" Text="Modify" CommandName="Modify" />
- </ItemTemplate>
- </asp:TemplateField>
- <asp:TemplateField>
- <ItemTemplate>
- <asp:Button ID="btnDel" runat="server" Text="Delete" CommandName="Del" />
- </ItemTemplate>
- </asp:TemplateField>
- <asp:BoundField DataField="id" HeaderText="ID" />
- <asp:BoundField DataField="name" HeaderText="Name" />
- </Columns>
- </asp:GridView>
- </div>
- </ContentTemplate>
- <Triggers>
- <asp:AsyncPostBackTrigger ControlID="Button1" EventName="Click" />
- </Triggers>
- </asp:UpdatePanel>
- </div>
- </form>
- </body>
注意：
1.其中div mydiv用來非同步作業時，顯示動態資訊（如一個動態圖片等）
2.mydiv初始不顯示，點擊button顯示。事件完成後，由於回傳機制，mydiv回到初始狀態：不可見
