CODEWITHSUNDEEP
asp.net
Rajesh Abraham
Rajesh Abraham

Reputation: 203

How to adjust 100% on my table height in all Screen resolution

I have a table and the border width is 1.

How can I adjust the height to 100 % in all screen resolutions? Or using jQuery how can I dynamically change the table heights?

I am new in web application

please help?...

rajesh

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0    Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title></title>
</head>

<script src="./Scripts/jquery-1.4.1.js" type="text/javascript">
jQuery(document).ready(function () {
    jQuery('#SprImg').attr("height", jQuery(window).height());
}); 
</script>

<body>

<table id="Table1" cellpadding="0" cellspacing="0" runat ="server" width="100%" border="0" align="left">
    <tr>
            <td id="LeftPane"    align="left" valign="top" width="175" runat="server"  ></td>
            <td id="RightPane"  align="left" width="*.*" runat="server" valign="top">
             <img id="SprImg" src="./Image/login.gif"  alt="" /> 

            </td>
    </tr>
</table>

Upvotes: 1

Views: 3586

Answers (1)

Aristos
Aristos

Reputation: 66641

You can use a trick to make that. Place an img somewhere in your table that takes a full column from top to bottom, that is non-visible. Then onload you change this image height to the document height, and you force the table to take this height.

jQuery(document).ready(function() {
    jQuery('#SprImg').attr("height", jQuery(window).height());
});

and the image, that is 1x1 pixel transparent gif.

 <img id="SprImg" src="/images/spacer.gif" width="1" height="1" alt="" />

Place it somewhere inside a column that is from up to down. Now you can bind the window change size, to constantly change the image height to the window height in case that the user resize the browser.

The full page.

<!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>
    <title></title>

    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>

    <script>
    jQuery(document).ready(function () {
        jQuery('#SprImg').attr("height", jQuery(window).height());
    }); 
    </script>

</head>
<body>

<table id="Table1" cellpadding="0" cellspacing="0" runat ="server" width="100%" border="1" align="left">
    <tr>            
        <td id="LeftPane"    align="left" valign="top" width="175" runat="server">
            test text
        </td>
        <td id="RightPane"  align="left" width="*.*" runat="server" valign="top">
            <img id="SprImg" src="/img/ui/spacer.gif" width="1" height="1"  alt="" /> 
        </td>
    </tr>
</table>

</body>
</html>

Upvotes: 5

Related Questions