how to set the size of the element same as that of browser in asp.net
I am making a website and in that i have a master page. I have set the width and height of elements in the master page to suit Firefox browser so it is working fine when i open my page in it but as soon as i shift to Chrome or opera or IE, the page doesn't fit the entire browser area. The page is either smaller (showing white spaces) or larger (getting scroll bar) than the viewing area of the browser and the functioning is obvious because I have hard-coded the width and height to suit Firefox. I also know that when i open the same page in Firefox but in someone else's computer there will be at least some distortion (due to different resolution).
Does anybody has a javascript/c# code which i can use to dynamically set the size of an element as per browser in which it is opening? The following is the html of my Master page. I have highlighted the code in bold which i have set for Firefox.
<%@ Master Language="C#" AutoEventWireup="true" CodeFile="MasterPage.master.cs" Inherits="MasterPage" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title>Untitled Page</title>
<asp:ContentPlaceHolder id="head" runat="server">
</asp:ContentPlaceHolder>
</head>
<body>
<form id="form1" runat="server">
<div>
<table width="1330" cellspacing="1" cellpadding="1" border="0" align="left">
<tr>
<td width="5" rowspan=2> </td>
<td width="95"> </td>
<td align="center" width="1230"><img src="Images/dset01titleds.gif" width=392 height=63 border=0 alt="Blank Title w/ Drop Shadow"></td>
</tr>
<tr>
<td align="center" valign="top" width="100">
<a href="http://"><img src="Images/dset01b01.gif" width=114 height=30 border=0 alt="Home"></a><br>
<a href="http://"><img src="Images/dset01b02.gif" width=114 height=30 border=0 alt="About Us"></a><br>
<a href="http://"><img src="Images/dset01b03.gif" width=114 height=30 border=0 alt="Products"></a><br>
<a href="http://"><img src="Images/dset01b04.gif" width=114 height=30 border=0 alt="Services"></a><br>
<a href="http://"><img src="Images/dset01b05.gif" width=114 height=30 border=0 alt="Order"></a><br>
<a href="http://"><img src="Images/dset01b06.gif" width=114 height开发者_运维技巧=30 border=0 alt="Contact"></a><br>
<a href="http://"><img src="Images/dset01b07blank.gif" width=114 height=30 border=0 alt="Blank"></a><br>
</td>
<td valign="top" width="1230px" style="height:440px">
<asp:ContentPlaceHolder id="ContentPlaceHolder1" runat="server">
</asp:ContentPlaceHolder>
</td>
</tr>
<tr style="height:10px"><td colspan=3 align=center>bottom of the screen</td></tr>
</table>
</div>
</form>
</body>
</html>You can just use css, with like this:
width: 100vw; // 100% of viewport width
width: 100vh: // 100% of viewport height
This should work because viewport refers to current device
Why don't you use CSS to style your client-area?
You could use
width: 100%;
height: 100%;
to get an element use all available space. I don't think its a good idea to compute the size on the server side in c#.
Generally you should set the width of your main container(Div or table) in percent or pixel. when you set it to 100 in percent(100%) it will cover all the page in every browser.
If you set the main container in pixel, 920 px is approximately good.
but you should use margin:0px auto css property for your container to place in center of page.
for your inner elements you can use both percent and pixel. because you have set main container width before.
加载中,请稍侯......
精彩评论