Fit Site to Screen/Window

xProteuSx · October 20, 2008

I am building a site, and I would like it to fit the entire browser window, regardless of whether there is enough content or not. So far it works if there is enough content to fill the window, but I would like the site to stretch regardless. I have been at this for hours, but its my first attempt at CSS: I have been <table> all the way, from the start, and am making the conversion only now. Please help before I pull all of my hair out (it hurts!).

INDEX.HTML:

<body marginheight="0" marginwidth="0" height="100%">

<div class="fullscreen">

<table height="100%" border="0" cellpadding="0" cellspacing="0">
  <tr>
    <td>
    
    <table width="600" height="100%" border="0" cellpadding="0" cellspacing="0">
      
      <div id="header" class="header">
      <tr width="600">
        <td width="3"></td>
        <td height="30" bgcolor="#000000" align="right">
        	<font color="#FFFFFF"><strong>
            | <a href="http://www.hotmail.com">Stock</a> | <a href="http://www.hotmail.com">Accessories</a> | <a href="http://www.hotmail.com">Specials</a> | <a href="http://www.hotmail.com">Your Account</a> |
            </strong></font>
        </td>
      </tr>
      </div>
      
      <tr width="600">
        <td width="3"></td>
        <td height="1" bgcolor="#666666"></td>
      </tr>
      
      <div id="mainbody" class="mainbody">
      <tr>
      	<td width="3"></td>
        <td height="*" bgcolor="#000000">
        
        </td>
      </tr>
      </div>
      
      <tr width="600">
        <td width="3"></td>
        <td height="1" bgcolor="#666666"></td>
      </tr>
      
      <div id="footer" class="footer">
      <tr width="600">
      	<td width="3"></td>
        <td height="30" bgcolor="#000000" align="right">
        	<font color="#FFFFFF"><strong>
            | <a href="http://www.hotmail.com">Contact Us</a> | <a href="http://www.hotmail.com">About Us</a> | <a href="http://www.hotmail.com">Disclamer</a> | <font class="small">hotmail<sup>&#169;</sup></font> |
            </strong></font>        </td>
      </tr>
      </div>
      
    </table>

    </td>
    
    <td align="left">
    
    <div id="sidebar" class="sidebar">
    <table>
    	<tr>
            <td valign="bottom">
                <img src="images/smokingcigar.jpg" />
            </td>
        </tr>
    </table>
    </div>

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

</div>

</body>

MAIN.CSS

@charset "utf-8";

html
{
background-color:#000000;
height:100%;
}

a:link
{
font-size:12px;
font-style:italic;
text-decoration:none;
color:#FFFFFF;
}

a:visited
{
font-size:12px;
font-style:italic;
text-decoration:none;
color:#FFFFFF;
}

a:active
{
font-size:12px;
font-style:italic;
text-decoration:none;
color:#FFFFFF;
}

a:hover
{
font-size:12px;
font-style:italic;
text-decoration:none;
color:#CCCCCC;
}

font.small
{
font-size:12px;
font-style:italic;
color:#FFFFFF;
}

div.fullscreeen
{
display:block;
position:absolute;
    top:0;
    left:0;
width:100%;
    height:100%;
}

Thanks a mil to anyone who takes the time! I am at a total loss, and only ask these things after I have tried everything.

dropfaith · October 20, 2008

your css is forcing the fullscreen div to work properly but then your using width on table elements like 600

which wont force it

use percentages for those as well

that add up to 100 %

Sign In

Fit Site to Screen/Window

Recommended Posts

xProteuSx

Link to comment

Share on other sites

dropfaith

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Important Information