SitePoint Sponsor |
|
User Tag List
Results 1 to 7 of 7
Thread: 100% Height, driving me LOONEY
-
Sep 10, 2007, 14:53 #1
- Join Date
- Mar 2006
- Posts
- 10
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
100% Height, driving me LOONEY
Alright, its been a while since I've done coded out a layout, let alone a CSS layout... I need some help here, I'm trying to get this full height and I've pulled out all of my hair trying to do so
http://www.xixel.net/PT3/
Any help or guidance would be greatly appreciated
-
Sep 10, 2007, 15:51 #2
- Join Date
- Jun 2007
- Location
- San Diego, CA
- Posts
- 784
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Yeah, height:100% doesn't work at all in a number of cases. width:100% is usually all right though even that doesn't work well sometimes. But I don't recommend trying to set height as a percentage. Even if you can get it to work, when you're making changes elsewhere in your CSS file, they can all too easily make your height crash.
The most important thing will be to let your content fill it out. If you're doing that, nothing else will look horribly bad. There is one trick you might try though.
Turn the problem around. Look at it not as trying to get the body to stretch 100%, but getting the footer to stay at the bottom of the screen. If I remember I got my website to work by setting the div to bottom:0. That worked once I put a wrapper div around it and align the wrapper vertical-align:baseline. You have to set both divs to position:absolute. Hope that gets you going in the right direction.Whatever you can do or dream you can, begin it.
Boldness has genius, power and magic in it. Begin it now.
Chroniclemaster1, Founder of Earth Chronicle
A Growing History of our Planet, by our Planet, for our Planet.
-
Sep 10, 2007, 20:03 #3
- Join Date
- Sep 2005
- Location
- Sydney, NSW, Australia
- Posts
- 16,875
- Mentioned
- 25 Post(s)
- Tagged
- 1 Thread(s)
I use
html, body {height : 100%; overflow : visible;}
which works in all the browsers that I tried it in.Stephen J Chapman
javascriptexample.net, Book Reviews, follow me on Twitter
HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
<input name="html5" type="text" required pattern="^$">
-
Sep 10, 2007, 20:11 #4
- Join Date
- Jul 2006
- Location
- Victoria, Australia
- Posts
- 4,122
- Mentioned
- 29 Post(s)
- Tagged
- 2 Thread(s)
That seems logical felgall, i'll give it a good kicking and see what falls off.
-
Sep 10, 2007, 21:22 #5
- Join Date
- Mar 2006
- Location
- Akron, OH
- Posts
- 78
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
I would try and take the the footer div out of the container div (which is set to 100%
. Then give the container a bottom margin of -58px (the height of your footer). Then add a new div inside the container where the footer div used to be with height:58px; clear:both; (used essentially as padding for where the footer will go). Then put the footer div right outside the container div and right after it, and I think it should work. For more details and where I learned this from, visit: http://www.sitepoint.com/forums/showthread.php?t=143801 (Paul O'B is the man)
But like they said above, I wouldn't put too much into this if you can't get it, b/c once you have content on the site, it should fill it self out.Thank you, Chuck Norris.
-
Sep 11, 2007, 00:04 #6
- Join Date
- Jan 2005
- Location
- Netherlands
- Posts
- 4,300
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Hello
your header logo image is missing, and maybe rethink how you do your body and header image, your code 100% high
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=utf-8" /> <title>PT3</title> <style type="text/css"> *{padding:0;margin:0;} body{background: url('images/header-tile.gif') 0% 0% repeat-x;} html,body{height:100%;} #container{ background: url('images/side-tile.gif') 0% 0% repeat-y; margin-top:-58px; } * html #container{height:100%;} head+body #container{min-height:100%;overflow:auto;} #header{ height:140px; background: url('http://www.xixel.net/PT3/images/logo1.gif') 0% 0% no-repeat; border-top:58px solid #fafafa; } #hright { float:right; width:51px; height: 140px; background: url('images/header-cap.gif') 0% 0% no-repeat; } #left{ float:left; width:225px; background: url('images/side-nav.gif') 0% 0% no-repeat; } #right{ float:right; width:51px; height:100px; background: url('images/content-cap.gif') 0% 0% no-repeat; } #middle{ overflow:auto; font-size:80%; background: url('images/content-tile.gif') 0% 0% repeat-x; } * html #middle{float:left;} * html #middle p,* html #footer{height:1%;} #footer{ overflow:hidden; background: url('images/bottom-tile.gif') 0% 0% repeat-x; min-height:1%; } #fleft,#fright {height:58px;} #fleft{ float:left; width:225px; background: url('images/side-bcap.gif') 0% 0% no-repeat; } #fright { float:right; width:51px; background: url('images/bottom-cap.gif') 0% 0% no-repeat; } h1,h2,h3,h4 { margin: 0.2em 0 } p{margin: 0.5em 0} #sidenav { margin:50px 0 0 0; padding:0 15px; list-style:none; } #sidenav li{background: url('images/side-dots.gif') repeat-x bottom right;} #sidenav a { padding-left: 15px; display: block; font-family: Verdana, Tahoma, Sans-Serif; font-size: 10px; text-decoration: none; color: #808080; height: 25px; line-height: 25px; background: url('images/bullet.gif') 4px 11px no-repeat; } #sidenav a:hover,#sidenav a:active { background: #f2f2f2 url('images/redbullet.gif') 4px 11px no-repeat; cursor: pointer; text-decoration: underline; color: #333333; } </style> </head> <body> <div id="container"> <div id="header"> <div id="hright"></div> </div> <div id="left"> <ul id="sidenav"> <li><a href="##">Side Item</a></li> <li><a href="##">Side Item</a></li> <li><a href="##">Side Item</a></li> <li><a href="##">Side Item</a></li> <li><a href="##">Side Item</a></li> </ul> </div> <div id="right"> </div> <div id="middle"><p>Content.<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />Now to make it full height... ugh</p></div> </div> <div id="footer"> <div id="fleft"></div> <div id="fright"></div> </div> </body> </html>
-
Sep 12, 2007, 13:20 #7
- Join Date
- Mar 2006
- Posts
- 10
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
wow, thanks alot for your time! makes more sense to me - again greatly appreciated
Bookmarks