SitePoint Sponsor

User Tag List

Results 1 to 4 of 4

Thread: 100% Height?

  1. #1
    @alexstanford Alex's Avatar
    Join Date
    Apr 2004
    Location
    Jacksonville, Florida
    Posts
    757
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    Question 100% Height?

    www.shockedstyle.com

    How can I make the height of the site 100%?
    Alex Stanford @alexstanford tumblog about.me in fb G+ K
    TechTalkin The Premier Community for Technology Enthusiasts and Professionals
    Full Ambit Media Zero Sacrifice Web Design & Development; Made in the USA @fullambit in fb G+ K

  2. #2
    SitePoint Addict
    Join Date
    Jan 2002
    Location
    NJ/NY
    Posts
    346
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Not sure if this is the solution you're looking for, but you can use javascript to grab the height of the window (i.e. window.height) and set a particular element to that height.

  3. #3
    SitePoint Member
    Join Date
    Aug 2004
    Location
    Perth, Western Australia
    Posts
    13
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Some CSS hacks are necessary to make height:100% work cross-browser. The solution will depend on what you are trying to achieve - for example, do you want to position a footer at the bottom of the page?

    Have a look at the CSS-Discuss Wiki to find the solution to the situation that best matches your own. (In my experience there is no perfect solution - somewhere along the line you may lose a browser or two and it's a matter of setting priorities.)

    mate. :-)

  4. #4
    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,

    Quote Originally Posted by mate
    Have a look at the CSS-Discuss Wiki to find the solution to the situation
    No need to go the that far (even though 2 of my layouts are on that list anyway lol (and that's a great resource and worth a visit anyway)). I have put up a FAQ in the sticky thread that explains 100% in depth and I believe it to be one of the best methods about and most other methods have in fact been copied from my code anyway (not to boast of course) .

    There is also a FAQ on how to keep the footer at the bottom and various methods explained n the three column demo sticky thread.

    That's enough to keep anyone busy for a while!

    Anyway Yuneek here is an example of your page with 100% height added in.

    There are three things to remember.

    1) 100% height can only be inherrited from the html,body elements and further nestings collapse to height auto. That means only one element can really carrry the 100% height ans the whole page (with the exception of the footer must go inside this outer.

    2) The negative margin bottom on the main wrapper must match the height of the footer content.

    3) You must clear the bootm footer by either allowing padding on the elements above or by use aof an empty div of specific height as in the example below.

    Code:
    <!DOCTYPE html
    PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title>.::SHOCKEDSTYLE::. The Next Generation Of Webdesign</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <meta name="author" content="ShockedStyle ( @ latentmedium.com)" />
    <meta name="copyright" content="Copyright 2004 ShockedStyle" />
    <meta name="description" content="A web standard compliant design studio with tutorials, articles, design, forums and more!" />
    <meta name="distribution" content="Global" />
    <meta name="keywords" content="Shocked, Style, Media, Design, Web, Graphics, Tutorials, Articles" />
    <meta http-equiv="content-language" content="EN-US" />
    <meta name="revisit-after" content="2 Days" />
    <meta name="robots" content="All" />
    <style>
    /* commented backslash mac hiding hack  \*/ 
    html, body{height:100%;} 
    /* end hack */ 
    html,body {margin:0;padding:0;}
    body {
      background-color: #DEDEDE;
      margin: 0px;
      font-family: Verdana, Arial, Helvetica, sans-serif;
      font-size: 10px;
      padding: 0px;
    }
    p {
    	 font-family: Verdana, Arial, Helvetica, sans-serif;
    	 font-size: 10px;
      color: #555555;
    	 text-align: justify;
    }
    h1 {
    	 font-family: Verdana, Arial, Helvetica, sans-serif;
    	 font-size: 10px;
      font-weight: bold;
      color: #B00000;
    	 text-align: justify;
      margin-top: 17px;
    }
    img {
    	border: 0px;
    }
    div.header {
    	 width: 660px;
      height: 30px;
      text-align: center;
      vertical-align: middle;
      border-top: 5px solid #B00000;
      border-bottom: 1px solid #8A8A8A;  
      background-color: #FFFFFF;
      padding: 15px 0px 15px 0px;
    }
    div#headerspace{height:30px}/*mozilla needs this*/
    div.bg {
    	 width: 730px;
    	 min-height: 100%;
      background-image:  url(http://www.shockedstyle.com/img/bg.gif);
      background-repeat: repeat-y;
    	 padding-left: 20px;
     margin-bottom:-80px;/* make room for footer - same as footer height*/
    }
    * html div.bg {height:100%}
    div.main {
    		 min-height: 300px;
      width: 660px;
      padding-top: 30px;
    }
    * html div.main {height:300px}
    * html div.content {height:300px}
    div.content {
    min-height: 300px;
    width: 400px;
    float: left;
    padding-bottom: 20px;
    line-spacing: 2px;
    }
    div.side {
    	 height: auto;
      width: 220px;
    	 float: right;
      padding-right: 10px;
      padding-bottom: 40px;
    }
    div.footer {
    	 width: 660px;
      line-height: normal;
      text-align: center;
      vertical-align: middle;
      border-top: 5px solid #B00000;
      border-bottom: 1px solid #8A8A8A;  
      background-color: #FFFFFF;
      padding: 12px 0px 12px 0px;
      clear: both;
    }
    a.copy:link {
    	 font-family: Verdana, Arial, Helvetica, sans-serif;
    	 font-size: 10px;
      color: #B00000;
      text-decoration: none;
    }
    a.copy:visited {
    	 font-family: Verdana, Arial, Helvetica, sans-serif;
    	 font-size: 10px;
      color: #B00000;
      text-decoration: none;
    }
    a.copy:hover {
    	 font-family: Verdana, Arial, Helvetica, sans-serif;
    	 font-size: 10px;
      color: #B00000;
      text-decoration: underline;
    }
    
    div.copyright {
    	 width: 660px;
      line-height: 30px;
      font-family: Verdana, Arial, Helvetica, sans-serif;
    	 font-size: 10px;
      color: #444444;
      text-align: center;
      vertical-align: middle;
    }
    /* Begin Navigation */
    a.navi:link {
      font-weight: bold;
      color: #333333;
      text-decoration: none;
      border-left: 1px solid #777777;
      padding: 0px 10px 0px 10px;
    }
    a.navi:visited {
      font-weight: bold;
      color: #333333;
      text-decoration: none;
      border-left: 1px solid #777777;
      padding: 0px 10px 0px 10px;
    }
    a.navi:hover {
      font-weight: bold;
      color: #B00000;
      text-decoration: none;
      border-left: 1px solid #777777;
      padding: 0px 10px 0px 10px;
    }
    a.navir:link {
      font-weight: bold;
      color: #333333;
      text-decoration: none;
      border-left: 1px solid #777777;
      border-right: 1px solid #777777;
      padding: 0px 10px 0px 10px;
    }
    a.navir:visited {
      font-weight: bold;
      color: #333333;
      text-decoration: none;
      border-left: 1px solid #777777;
      border-right: 1px solid #777777;
      padding: 0px 10px 0px 10px;
    }
    a.navir:hover {
      font-weight: bold;
      color: #B00000;
      text-decoration: none;
      border-left: 1px solid #777777;
      border-right: 1px solid #777777;
      padding: 0px 10px 0px 10px;
    }
    /* home */
    a.buttonh {
    background: url("http://www.shockedstyle.com/img/home1.gif") 0 0 no-repeat;
    display: block;
    height: 36px;
    width: 71px;
    float: left;
    }
    a.buttonh:hover {
    background-position: -71px 0;
    }
    /* /home */
    /* portfolio */
    a.buttonp {
    background: url("http://www.shockedstyle.com/img/portfolio1.gif") 0 0 no-repeat;
    display: block;
    height: 36px;
    width: 70px;
    float: left;
    }
    a.buttonp:hover {
    background-position: -70px 0;
    }
    /* /portfolio */
    /* articles */
    a.buttona {
    background: url("http://www.shockedstyle.com/img/articles1.gif") 0 0 no-repeat;
    display: block;
    height: 36px;
    width: 70px;
    float: left;
    }
    a.buttona:hover {
    background-position: -70px 0;
    }
    /* /articles */
    a.buttont {
    background: url("http://www.shockedstyle.com/img/tutorials1.gif") 0 0 no-repeat;
    display: block;
    height: 36px;
    width: 70px;
    float: left;
    }
    a.buttont:hover {
    background-position: -70px 0;
    }
    /* forum */
    a.buttonf {
    background: url("http://www.shockedstyle.com/img/forum1.gif") 0 0 no-repeat;
    display: block;
    height: 36px;
    width: 70px;
    float: left;
    }
    a.buttonf:hover {
    background-position: -70px 0;
    }
    /* /forum */
    /* contact */
    a.buttonc {
    background: url("http://www.shockedstyle.com/img/contact1.gif") 0 0 no-repeat;
    display: block;
    height: 36px;
    width: 70px;
    float: left;
    }
    a.buttonc:hover {
    background-position: -70px 0;
    }
    /* /contact */
    /* End Navigation */
    div.header a, div.header img  {vertical-align:middle}
    html > body  #minHeight{float:left;width:0px;height:100%;margin-bottom:-80px;} /*safari wrapper for 100% height*/
    #outerfooter{height:80px}/*outer footer must have height*/
    .clearer {/*make room for footer*/
     height:80px;/* match height of footer and copyright*/
     clear:both;
    }
    </style>
    </head>
    <body>
    <div id="minHeight"></div>
    <div class="bg"> 
      <div id="headerspace"></div>
      <div class="header"> <a href="http://www.shockedstyle.com" class="buttonh"></a> 
    	<a href="navi.htm" class="buttonp"></a> <a href="navi.htm" class="buttona"></a> 
    	<a href="navi.htm" class="buttont"></a> <a href="navi.htm" class="buttonf"></a> 
    	<a href="navi.htm" class="buttonc"></a> &nbsp; &nbsp; &nbsp; <img src="http://www.shockedstyle.com/img/logo.gif" alt="ShockedStyle" title="ShockedStyle" /> 
      </div>
      <div class="main"> 
    	<div class="content"><img src="http://www.shockedstyle.com/img/content.gif" title="Content" alt="Content" /> 
    	  <p> 
    	  <h1>Introduction</h1></p>
    	  <p>Welcome to ShockedStyle, a new web design firm, among the many. We also 
    		offer a community for programmers and designers to learn, ask questions 
    		and help others. While today's internet has high demands within the web 
    		design industry, we have come to find our staff worthy of the high demands 
    		of current standards and extraordinarily cost effective. ShockedStyle 
    		is quite possibly among the most reasonable advanced development team 
    		on the internet.</p>
    	  <em>ShockedStyle Team</em> </div>
    	<div class="side"><img src="http://www.shockedstyle.com/img/articles-head.gif" title="Articles" alt="Articles" /><br />
    	  <h1>Just a title</h1>
    	  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy 
    		nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. 
    		Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit 
    		lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure 
    		dolor in hendrerit in vulputate velit esse molestie consequat, vel illum 
    		dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio 
    		dignissim qui blandit praesent luptatum zzril delenit augue duis dolore 
    		te feugait nulla facilisi.</p>
    	</div>
      </div>
      <div class="clearer"></div>
    </div>
    <div id="outerfooter"> 
      <div class="footer"> <a href="index.htm" class="navi">HOME</a> <a href="index.htm" class="navi">PORTFOLIO</a> 
    	<a href="index.htm" class="navi">ARTICLES</a> <a href="index.htm" class="navi">TUTORIALS</a> 
    	<a href="index.htm" class="navi">FORUM</a> <a href="index.htm" class="navir">CONTACT</a> 
      </div>
      <div class="copyright">Copyright  2004 ShockedStyle. <a href="http://validator.w3.org/check?uri=referer" class="copy">XHTML</a>, 
    	<a href="http://jigsaw.w3.org/css-validator/check/referer" class="copy">CSS</a>.</div>
    </div>
    </body>
    </html>
    As Mate said above you will loose a few browsers on the way most notably ie mac (i can do ie mac with 100% height but relies on html 4.01 doctype without uri and a couple of extra nestings but hardly seems worth the bother.)

    The code above will work in about 95% browsers but should cause little harm in the others.

    The dimensions are critical as mentioned above and must match up as explained. However the technique seems quite robust and has been used anumber of times successfully.

    Hope that helps.

    Paul


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
  •