SitePoint Sponsor |
|
User Tag List
Results 1 to 4 of 4
Thread: 100% Height?
-
Aug 24, 2004, 17:22 #1
- Join Date
- Apr 2004
- Location
- Jacksonville, Florida
- Posts
- 757
- Mentioned
- 1 Post(s)
- Tagged
- 0 Thread(s)
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
-
Aug 24, 2004, 18:36 #2
- 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.
Forget WordPress. Launch a 300,000+ page autoscaling Job Search.
FREE GUIDES
Google Rapid Indexer - 21K in 21 Days - 7 Steps to Start a Site
-
Aug 24, 2004, 21:10 #3
- 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. :-)
-
Aug 25, 2004, 07:17 #4
- Join Date
- Jan 2003
- Location
- Hampshire UK
- Posts
- 40,556
- Mentioned
- 183 Post(s)
- Tagged
- 6 Thread(s)
Hi,
Originally Posted by mate
.
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> <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>
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