SitePoint Sponsor

User Tag List

Results 1 to 10 of 10
  1. #1
    SitePoint Zealot Arkkimaagi's Avatar
    Join Date
    Mar 2002
    Location
    Lappeenranta, Finland
    Posts
    176
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    CSS height 100% [solution found!] (ie, ne, opera, firebird)

    Can someone get this to work in mozilla/netscape?

    In ie6 it works, in opera it works, I am not sure about ie5 and netscape 7.1 does not do the height thing properly.
    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>sample</title>
    <style type="text/css">
       body{
    	height:100%;
    	text-align:center;
    	margin-top:0px;
    	margin-bottom:0px;
    	padding:0px;
       }
       #main,#header,#footer,#cleaner{
    	margin-left:auto;
    	margin-right:auto;
    	width:800px;
    	text-align:left;
       }
       #main{
    	height:100%;
    	margin-bottom:-50px;
       }
       #header, #footer,#cleaner{
    	height:50px;
       }
       /*Here is some visual stuff that is not needed*/
       body{
    	background:#ffffff;
       }
       #main{
    	background:#EEEEEE;
       }
       #header, #footer{
    	background:#DDDDDD;
       }
    </style>
    </head>
    <body>
    <div id="main">
      <div id="header">header</div>
      Content
      <div id="cleaner"></div>
    </div>
    <div id="footer">footer</div>
    </body>
    </html>
    Last edited by Arkkimaagi; Nov 21, 2003 at 07:42.

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    You could try adding html{height:100%} for mozilla but be aware that mozilla will treat 100% as viewport height and IE treats it as document height.

    Paul

  3. #3
    SitePoint Zealot Arkkimaagi's Avatar
    Join Date
    Mar 2002
    Location
    Lappeenranta, Finland
    Posts
    176
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks!!

  4. #4
    Robert Wellock silver trophybronze trophy xhtmlcoder's Avatar
    Join Date
    Apr 2002
    Location
    A Maze of Twisty Little Passages
    Posts
    6,316
    Mentioned
    60 Post(s)
    Tagged
    0 Thread(s)
    Mozilla does do it properly M$ Explorer doesn't that is why you may need the hack to the html element.

  5. #5
    SitePoint Zealot Arkkimaagi's Avatar
    Join Date
    Mar 2002
    Location
    Lappeenranta, Finland
    Posts
    176
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    xhtmlcoder, so how can I do this with netscape: I want the page to be 100% of the viewed area unless the content is longer than that. In that case the footer should move also.

  6. #6
    Super Ninja Monkey Travis's Avatar
    Join Date
    Dec 2001
    Location
    Sioux City, Iowa
    Posts
    691
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thats only possible with JS if you care about IE. If you don't, you can use min-height.
    Travis Watkins - Hyperactive Coder
    My Blog: Realist Anew
    Projects: Alacarte - Gnome Menu Editor

  7. #7
    Robert Wellock silver trophybronze trophy xhtmlcoder's Avatar
    Join Date
    Apr 2002
    Location
    A Maze of Twisty Little Passages
    Posts
    6,316
    Mentioned
    60 Post(s)
    Tagged
    0 Thread(s)
    As was explained before you use this hack in your CSS:

    html, body{height:100%;... instead of just body{height:100%;...

  8. #8
    SitePoint Zealot Arkkimaagi's Avatar
    Join Date
    Mar 2002
    Location
    Lappeenranta, Finland
    Posts
    176
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I found a solution, and it seems to work!!

    Thanks for your support, you guided me to the right path.
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
    <title>sample</title>
    <style type="text/css">
    	body, html{
    		height:100%;
    		text-align:center;
    		margin:0px;
    		padding:0px;
    	}
    	#main,#header,#footer,#cleaner{
    		margin-left:auto;
    		margin-right:auto;
    		width:800px;
    		text-align:left;
    	}
    	#main{
        /*this height is for ie only*/
    		height:100%;
    		min-height:100%;
    		margin-bottom:-50px;
    	}
      /*ie wont see this, other browsers will*/
    	body>div#main{
    		height: auto;
    	}
    	#header, #footer,#cleaner{
    		height:50px;
    	}
    	/*Here is some visual stuff that is not needed*/
    	body{background:#ffffff;}
    	#main{background:#EEEEEE;}
    	#header, #footer{background:#DDDDDD;}
    </style>
    </head>
    <body>
    <div id="main">
      <div id="header">header</div>
      Content<br />
      <br /> 
      The purpose of this test page is to get content area 100% height of the viewable area, unless the content is longer, in which case the container should expand.<br />
      <br />
      This can be tested by looking at this page with small content (the grey area should be 100% high)<br />
      And then making the browser smaller so that it can be scrolled (the text at the light grey area should stay above darker gray area)<br />
      <br />  
      This page has been tested in folloving browsers in winxp succesfully:<br />
      IE 5.0, IE 5.5, IE 6.0, Netscape 7.1, Mozilla Firebird 0.7, Opera 7.22, MyIE2 0.8.2070<br />
      <br />
      Known problems: In IE, the footer is 1px away from the page bottom. In Opera the page bottom is not updated unless the page is refreshed. (It still works like it is wanted, it just does not update the height on the fly.)<br />
      <br />
      This text should be above the footer at all times.
      <div id="cleaner"></div>
    </div>
    <div id="footer">footer</div>
    </body>
    </html>
    w3c: This Page Is Valid XHTML 1.1!

  9. #9
    SitePoint Zealot Arkkimaagi's Avatar
    Join Date
    Mar 2002
    Location
    Lappeenranta, Finland
    Posts
    176
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I wrote a second version of this code.

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
    <title>sample</title>
    <style type="text/css">
    	body, html{
    		height:100%;
    		text-align:center;
    		margin:0px;
    		padding:0px;
    	}
    	#main,#header,#footer,.cleaner{
    		margin-left:auto;
    		margin-right:auto;
    		width:800px;
    		text-align:left;
    	}
    	#main{
        /*this height is for ie only*/
    		height:100%;
    		min-height:100%;
    		margin-bottom:-50px;
    	}
      /*ie wont see this, other browsers will*/
    	body>div#main{
    		height: auto;
    	}
    	#header, #footer,.cleaner{
    		height:50px;
    	}
      
    	#header{
    		position:absolute;
        top:0px;
        left:50%;
        margin-left:-400px;
    	}
    	/*Here is some visual stuff that is not needed*/
    	body{background:#ffffff;}
    	#main{background:#EEEEEE;}
    	#header, #footer{background:#DDDDDD;}
    
    </style>
    </head>
    <body>
    
    
    <div id="main">
      <div class="cleaner"></div>
      <h1>Content</h1>
      
      <p>The purpose of this test page is to get content area 100% height of the viewable area, unless the content is longer, in which case the container should expand.</p>
      
      <p>This can be tested by looking at this page with small content (the grey area should be 100% high)</p>
      
      <p>And then making the browser smaller so that it can be scrolled (the text at the light grey area should stay above darker gray area)</p>
       
      <p>This page has been tested in folloving browsers in winxp succesfully:<br />
      IE 5.0, IE 5.5, IE 6.0, Netscape 7.1, Mozilla Firebird 0.7, Opera 7.22, MyIE2 0.8.2070</p>
      
      <p>Known problems: In IE, the footer is 1px away from the page bottom. In Opera the page bottom is not updated unless the page is refreshed. (It still works like it is wanted, it just does not update the height on the fly.)</p>
      
      <p>This is a second version of the solution, in this version the header code can be before or after the content code. Thisway the page content will be in the beginning of the page for search engines to look for.</p>
      
      <p>This text should be above the footer at all times.</p>
      <div class="cleaner"></div>
    </div>
    <div id="header">header</div>
    <div id="footer">footer</div>
    
    </body>
    </html>
    The purpose of this test page is to get content area 100% height of the viewable area, unless the content is longer, in which case the container should expand.

    This can be tested by looking at this page with small content (the grey area should be 100% high)

    And then making the browser smaller so that it can be scrolled (the text at the light grey area should stay above darker gray area)

    This page has been tested in folloving browsers in winxp succesfully:
    IE 5.0, IE 5.5, IE 6.0, Netscape 7.1, Mozilla Firebird 0.7, Opera 7.22, MyIE2 0.8.2070

    Known problems: In IE, the footer is 1px away from the page bottom. In Opera the page bottom is not updated unless the page is refreshed. (It still works like it is wanted, it just does not update the height on the fly.)

    This is a second version of the solution, in this version the header code can be before or after the content code. Thisway the page content will be in the beginning of the page for search engines to look for.

    This page is valid xhtml1.1

  10. #10
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Looking Good


Bookmarks

Posting Permissions

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