62,243
社区成员
发帖
与我相关
我的任务
分享如何控制panel的高度和宽度适应屏幕
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title>申请表</title>
<style>
.Freezing
{
position:relative;
table-layout:fixed;
top:expression(this.offsetParent.scrollTop);
z-index:10;
}
.Freezing th{text-overflow:ellipsis;overflow:hidden;white-space:nowrap;padding:2px;}
</style>
<style type="text/css">
.style2
{
height: 20pt;
}
#Select1
{
width: 317px;
margin-left: 0px;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div style="width:100%;height:100%;">
<center>
<table border="0" cellpadding="0" cellspacing="0"
style="margin-left: 0pt; margin-top: 0pt; margin-bottom: 2pt; height: 100%; width: 100%;">
<tr><td align="left" style="color: #FF0000">
系统功能>>申请表>>查询</td>
</tr>
<tr><td align="left" class="style2">
网点 <select
id="网点" name="D1" runat="server" style="width: 300px">
<option></option>
</select> <asp:Button
ID="查询" runat="server"
Style="z-index: 100;left: 485px; top: 29px; width: 69px; height: 21px;"
Text="查询" />
<a href="javascript:window.showModalDialog('Sqb.aspx?xh=0','','dialogHeight:700px;dialogWidth:900px')">录入</a></td>
</tr>
<tr><td align="left" class="style2">
受理日期
<input ID="起始日期" runat="server" onclick="WdatePicker()" style="z-index: 112; left: 83px;
width: 79px; top: 32px; height: 16px; right: 638px;"
type="text" />
至
<input ID="终止日期" runat="server" onclick="WdatePicker()" style="z-index: 113; left: 184px;
width: 80px; top: 32px; height: 16px;" type="text"
width="176px" />
状态
<select
id="状态" name="D2" runat="server" style="width: 80px">
<option></option>
</select>
搜索关键字
<input ID="搜索关键字" runat="server" style="z-index: 113; left: 184px;width: 80px; top: 32px; height: 16px;" type="text" width="176px" />
</td>
</tr>
<tr>
<td align="left">
<asp:Panel ID="Panel1" runat="server" Height="338px" ScrollBars="Both"
Width="100%" >
<asp:GridView ID="GV" runat="server"
AutoGenerateColumns="False"
DataKeyNames="序号"
BackColor="White" BorderColor="#003366" BorderStyle="Double" BorderWidth="1px"
CellPadding="4" Width="97%" EmptyDataText="没有记录！"
HorizontalAlign="Center"
Font-Size="Small" Height="101px">
<HeaderStyle BackColor="#99FF99" Font-Bold="True" HorizontalAlign="Center" Height="18pt" />
<RowStyle BackColor="#F7F7DE" Height="15px" />
<EmptyDataRowStyle BackColor="#FFFFCC" Height="40px" HorizontalAlign="Center" VerticalAlign="Middle" />
<Columns>
<asp:TemplateField HeaderText="序号">
<ItemTemplate>
<a href="javascript:window.showModalDialog('Sqb_Lcmx.aspx?xh=<%# Eval("序号") %>','','dialogHeight:700px;dialogWidth:900px')"><%#Eval("序号")%></a>
</ItemTemplate>
<ItemStyle Width="60px" HorizontalAlign="Left" />
</asp:TemplateField>
<asp:BoundField DataField="受理网点" HeaderText="受理网点" >
<ItemStyle HorizontalAlign="Left" Width="60px" />
</asp:BoundField>
<asp:BoundField DataField="受理日期" HeaderText="受理日期" DataFormatString="{0:yyyy/MM/dd}">
<ItemStyle HorizontalAlign="Left" Width="60px" />
</asp:BoundField>
<asp:BoundField DataField="申请表编号" HeaderText="申请表编号" >
<ItemStyle HorizontalAlign="Left" Width="100px" />
</asp:BoundField>
<asp:BoundField DataField="姓名" HeaderText="姓名">
<ItemStyle HorizontalAlign="Left" Width="80px" />
</asp:BoundField>
<asp:BoundField DataField="操作员" HeaderText="操作员">
<ItemStyle HorizontalAlign="Left" Width="80px" />
</asp:BoundField>
<asp:BoundField DataField="状态" HeaderText="状态">
<ItemStyle HorizontalAlign="Left" Width="40px" />
</asp:BoundField>
<asp:BoundField DataField="备注" HeaderText="备注">
<ItemStyle HorizontalAlign="Left" Width="80px" />
</asp:BoundField>
<asp:TemplateField HeaderText="操作" ShowHeader="False">
<ItemTemplate>
<a href="javascript:window.showModalDialog('Sqb.aspx?xh=<%# Eval("序号") %>','','dialogHeight:700px;dialogWidth:900px')">修改</a>
</ItemTemplate>
<ItemStyle HorizontalAlign="Center" Width="20px" />
</asp:TemplateField>
</Columns>
<EmptyDataTemplate>没有记录！</EmptyDataTemplate>
<PagerStyle BackColor="#F7F7DE" ForeColor="Black" HorizontalAlign="Center" />
<SelectedRowStyle BackColor="#CE5D5A" Font-Bold="True" ForeColor="White" />
<AlternatingRowStyle BackColor="White" />
</asp:GridView>
</asp:Panel>
<asp:Label ID="Label28" runat="server" ForeColor="Red"
Text="注意：点击序号可以查看流程处理详情！"></asp:Label>
<asp:Label ID="返回记录数量" runat="server" ForeColor="Red" Text="返回记录数量"
Width="150px"></asp:Label>
</td>
</tr>
</table>
</center>
<iframe name="update" src="" width="0" height="0" scrolling="no" frameborder="0" style="display:none"></iframe>
</div>
</form>
</body>
</html>
--以上代码，使用panel可以使gridview查询的结果控制在屏幕内，不会因滚动屏幕而看不到最上面的查询条件，但是如果显示器分辨率变大，所有部件不会自动适应屏幕，网上关于panel这方面的介绍几乎没有。
请问如何控制panel控件高度和宽度，使其自动适应屏幕大小。
...全文
请发表友善的回复…
发表回复
frankwong 2016-09-22
- 打赏
- 举报
问题的症结在这里
http://blog.csdn.net/suweierxing/article/details/50111717
以专业开发人员为伍 2016-09-21
- 打赏
- 举报
另外，要控制好页面布局（例如所谓的滚动条不要跑到顶部），那么你应该使用 UpdatePanel 控件。看你没有用到它，估计你学习的 asp.net 是10几年以前的 asp.net 教程。
以专业开发人员为伍 2016-09-21
- 打赏
- 举报
你的 html、body、form 的高度都应该设置为 100%，里边的子对象才可能针对整个屏幕高度而定位。
frankwong 2016-09-21
- 打赏
- 举报
panel的高度不能通过设置百分百来固定，否则没有垂直滚动条。最后只能用js计算屏幕高度来获得
document.getElementById("Panel1").style.height=.......
