Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 8 of 8
  1. #1
    Regular Coder westmatrix99's Avatar
    Join Date
    Dec 2006
    Location
    South Africa
    Posts
    307
    Thanks
    12
    Thanked 0 Times in 0 Posts

    Question Css or Html or whatever can get me 100% height?

    Hi I am using a template:
    The left hand side has a column called "categories"
    I would like to get that to fit 100% of the page on the left.
    How do I do this in css or html or whatever can do this?
    I have been searching for days now to find a solution - that hopefully someone has a fix for, but nothing!!!
    Attached is the css that is the problem?
    PHP Code:
    html {
     
    /*overflow:hidden;*/
    }
    body{
    background-color#ffffff;
    font-familytahomaarialsans-serif;
    font-size10px;
    text-aligncenter;
    background-position0px 0px;
    margin0 auto;
    padding:0;
    height:100%; /*this is what I need*/
    border:none;
    background-imageurl(../images/background.gif);
    overflow:auto;
    }
    #container {
    margin0px auto;
    width780px;
    border-color#000000;
    border-width0px 1px 1px;
    border-stylesolid;
    }
    #categories{
    margin-bottom1px;
    padding1px 1px 1px 0px;
    border-color#000000;
    border-width1px 1px 1px 0px;
    border-stylesolid;
    height:100%!important/* real browsers */
    height:100%; /* IE6: for min-height*/
    min-height:100%; /* real browsers */
    position:relative;
    }
    .
    categories{
    margin-bottom1px;
    padding1px 1px 1px 0px;
    border-color#000000;
    border-width1px 1px 1px 0px;
    border-stylesolid;
    height:100%!important/* real browsers */
    height:100%; /* IE6: treaded as min-height*/
    min-height:100%; /* real browsers */
    position:relative;

    Cheers
    West
    Thanks for you support!

  • #2
    Senior Coder effpeetee's Avatar
    Join Date
    Feb 2007
    Location
    Clapham Junction - London SW
    Posts
    4,885
    Thanks
    228
    Thanked 204 Times in 203 Posts
    Not quite sure what you mean. Is this url any help

    http://www.communitymx.com/content/a....cfm?cid=afc58

    Frank
    * Sources (updated: 21.11.2012.
    Using Windows 8 Professional. 64bit with HP Photosmart 5510 printer Very useful site here.

  • #3
    Regular Coder westmatrix99's Avatar
    Join Date
    Dec 2006
    Location
    South Africa
    Posts
    307
    Thanks
    12
    Thanked 0 Times in 0 Posts
    Thanks am reading it now.

    Cheers
    West
    Thanks for you support!

  • #4
    ess
    ess is offline
    Regular Coder
    Join Date
    Oct 2006
    Location
    United Kingdom
    Posts
    866
    Thanks
    7
    Thanked 30 Times in 29 Posts
    I am not sure that you can do this without either

    1) using JavaScript...which can be difficult considering the amount of code to write in order to calculate elements heights, widths...etc...plus, users may disable JavaScript..and as such...not a good approach in my opinion.

    or, 2) using tables...which is simple and straight forward.

    I have created a sample that demonstrate how to use a table for this purpose. Please read notes written inside the code.

    Code:
    <!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" xml:lang="en" lang="en">
    <head>
    <meta http-equiv="content-type" content="text/html; charset=iso-8859-1"/>
    <meta http-equiv="content-language" content="en" />
    <title>Sample Page</title>
    <style type="text/css">
    html, body {
    height: 100%; 
    margin: 0;
    padding: 0;
    border:0;
    }
    #pageLayout {
    height: 100%;
    width: 100%;
    padding:0;
    margin:0;
    border:0;
    border-collapse:collapse; /* remove cellspacing etc */
    background-color: #369;
    color: #fff;
    }
    #header{
    height: 80px; /* remove this..if your site doesn't contain headers*/
    }
    #left{
    width: 200px;
    background-color: #fff;
    color: #222;
    vertical-align:top; /* display text at the top of the cell.*/
    }
    #right{
    vertical-align:top;
    background-color: #2a2;
    color: #222;
    }
    #footer{
    height: 80px; /* remove this..if your site doesn't contain footer*/
    }
    </style>
    </head>
    <body>
    <table id="pageLayout">
    	<tr> <!-- if you have a website header...otherwise remove the whole row -->
    		<td colspan="2" id="header"> 
    			<h1>Web site header</h1>
    		</td>
    	</tr>
    	<tr>
    		<td id="left">
    			<p>
    				place contents to be displayed on the left over here
    			</p>
    		</td>
    		<td id="right">
    			<p>
    				place contents to be displayed on the right over here
    			</p>
    		</td>
    	</tr>
    	<tr><!-- if you have a website footer...otherwise remove the whole row -->
    		<td colspan="2" id="footer">
    		<h1>Website footer</h1>
    		</td>
    	</tr>
    </table>
    </body>
    </html>
    If you have any problems with the above code, please don't hesitate to ask.

    Cheers,
    ~E

  • #5
    Regular Coder westmatrix99's Avatar
    Join Date
    Dec 2006
    Location
    South Africa
    Posts
    307
    Thanks
    12
    Thanked 0 Times in 0 Posts
    Thanks for that one.
    It is pretty simple and it works but...

    I prefer to use tables myself as I can't fully understand how css is better than tables.

    The template that I am using is a bit more complicate for some reason.
    Thanks for you support!

  • #6
    Regular Coder westmatrix99's Avatar
    Join Date
    Dec 2006
    Location
    South Africa
    Posts
    307
    Thanks
    12
    Thanked 0 Times in 0 Posts

    Question

    This my page:
    PHP Code:
    <!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>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>&copy;</title>
    <link href="css/style.css" rel="stylesheet" type="text/css" title="default"/>
    </head>
    <body>
    <div id="container">
    <?php include('topnav.php'); ?>
    <?php 
    include('menu.php'); ?>
    <table width="100%" border="0" cellpadding="0" cellspacing="0" bgcolor="#FFFFFF">
      <tr>
        <td width="200" valign="top"><table border="0" align="left" cellpadding="0" cellspacing="2" class="categories">
          <tr>
            <td colspan="3" class="categories_header"><div align="center">Header</div></td>
          </tr>
          <tr>
            <td colspan="3" nowrap="nowrap"><div class="categories_choices"><a href="#" class="categories_links">menu</a></div></td>
          </tr>
          <tr>
            <td colspan="3" nowrap="nowrap"><div class="categories_choices"><a href="#" class="categories_links">menu</a></div></td>
          </tr>
          <tr>
            <td colspan="3" nowrap="nowrap"><div class="categories_choices"><a href="#" class="categories_links">menu</a></div></td>
          </tr>
          <tr>
            <td colspan="3" nowrap="nowrap"><div class="categories_choices"><a href="#" class="categories_links">menu</a></div></td>
          </tr>
          <tr>
            <td colspan="3" nowrap="nowrap"><div class="categories_choices"><a href="#" class="categories_links">menu</a></div></td>
          </tr>
          <tr>
            <td nowrap="nowrap"class="categories_header"><div align="center">Header</div></td>
          </tr>
          <tr>
            <td nowrap="nowrap"><div class="categories_choices"><a href="#" class="categories_links">menu</a></div></td>
          </tr>
          <tr>
            <td nowrap="nowrap"><div class="categories_choices"><a href="#" class="categories_links">menu</a></div></td>
          </tr>
          <tr>
            <td nowrap="nowrap"><div class="categories_choices"><a href="#" class="categories_links">menu</a></div></td>
          </tr>
          <tr>
            <td colspan="3" nowrap="nowrap">&nbsp;</td>
          </tr>
        </table></td>
        <td valign="top"><table width="100%%" border="0" cellpadding="5" cellspacing="0" class="bhome">
          <tr>
            <td valign="top"><h1 align="left" id="header">header</h1></td>
          </tr>
          <tr>
            <td valign="top"><p align="left">TEXT</p></td>
          </tr>
        </table></td>
        <td width="200" valign="top"><table width="100%" border="0" cellspacing="0" cellpadding="5">
          <tr>
            <td valign="top">&nbsp;</td>
          </tr>
          <tr>
            <td valign="top">&nbsp;</td>
          </tr>
          <tr>
            <td valign="top"><div align="center"><img src="imagename" alt="" border="0" /></div>
              <br />
     </td>
          </tr>
          <tr>
            <td>&nbsp;</td>
          </tr>
        </table></td>
      </tr>
      <tr>
        <td width="200">&nbsp;</td>
        <td>&nbsp;</td>
        <td width="200">&nbsp;</td>
      </tr>
    </table>
    </div>
    <div>
    <?php include('footer.php'); ?>
    </div>
    </map></body>
    </html>
    Last edited by westmatrix99; 09-25-2007 at 04:54 PM.
    Thanks for you support!

  • #7
    Regular Coder
    Join Date
    Feb 2007
    Location
    Seattle
    Posts
    153
    Thanks
    5
    Thanked 9 Times in 9 Posts
    This might help.

    http://bonrouge.com/3c-hf-fluid.php

    Gary

  • #8
    Regular Coder westmatrix99's Avatar
    Join Date
    Dec 2006
    Location
    South Africa
    Posts
    307
    Thanks
    12
    Thanked 0 Times in 0 Posts
    Thanks am busy with that one too.
    Thanks for you support!


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •