PDA

View Full Version : 100% height - arrghh why can't i make it work????


sodyPop
December 14th, 2006, 07:24 PM
i am at my wits end! :a: :hair: :skull:
i have scoured the web to try and find the solution and i can't get it to work. Maybe I am just missing something? Any help would be much appreciated!

php:
http://16volt.com/history

css:
http://16volt.com/wp-content/themes/16volt/style.css


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>...::: 16VOLT :::...</title>
<link href="http://16volt.com/wp-content/themes/16volt/style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="container">
<div id="navBox"><span id="nav"><a href="http://16volt.com/">CURRENT</a> <a href="http://16volt.com/music">MUSIC</a> <a href="http://16volt.com/events">EVENTS</a> <a href="http://16volt.com/images">IMAGES</a> <a href="http://16volt.com/videos">VIDEOS</a> <a href="http://16volt.com/history">HISTORY</a> <a href="http://16volt.com/gear">GEAR</a> <a href="http://16volt.com/downloads">DOWNLOADS</a> <a href="http://16volt.com/boreds">BOREDS</a> <a href="http://16volt.com/contact">CONTACT</a> <a href="index.php">SHOP</a> <a href="http://myspace.com/16volt">MYSPACE</a></span></div>
<div id="content">
asdfasfasdfasfasfsd
</div>
</div>
</body>
</html>


css:



html, body {
height: 100%;
}

body {
margin: 0;
padding: 0;
text-align: center;
font-family: Helvetica, Arial, sans-serif;
font-size: 11px;
font-style: normal;
color: #000000;
text-decoration: none;
line-height: 12px;
background-color: #000;
}

/*SECTIONS*/

#container {
position: relative;
margin: 0 auto;
padding: 0px;
min-height: 100%;
height: auto;
width: 800px;
background-color: #fff;
text-align: left;
background-image: url(images/bg.png);
background-repeat: no-repeat;
}

* html #container {
height: 100%;
}

#navBox {
display: block;
position: absolute;
top: 120px;
width: 800px;
height: 20px;
background-color: #000000;
}

#nav {
display: block;
position: absolute;
left: 20px;
width: 310px;
height: 20px;
background-color: #fff;
font-family: Helvetica, Arial, sans-serif;
font-size: 10px;
line-height: 10px;
padding: 0px 10px 0px 10px;
text-align: left;
}

#newsBox {
display: block;
position: absolute;
top: 160px;
width: 300px;
}

#newsHdr {
position: absolute;
left: 10px;
}

#newsContent {
display: block;
position: absolute;
top: 30px;
width: 300px;
background-image: url(images/newback.gif);
padding: 10px;
}

#content {
display: block;
position: absolute;
top: 160px;
padding: 10px;
}

#rightSide {
position: absolute;
top: 187px;
left: 330px;
}

.hdr {
padding-bottom: 5px;
}

.eventList {
font-size: 18px;
margin-left: 0;
}

.eventList li {
list-style-type: none;
}

/*H*/

h1 {
font-size: 12px;
font-weight: bold;
border-bottom: 1px solid #000;
margin-bottom: -8px;
}

h2 {
font-size: 14px;
font-weight: bold;
margin-bottom: -8px;
}

/*LINKS*/

#nav a:link, a:visited {
color: #000;
text-decoration: none;
}

#nav a:hover, a:active {
color: #fff;
background-color: #000;
text-decoration: none;
}

#newsHdr a:hover {
text-decoration: none;
background-color: #fff;
}

a {
cursor: crosshair;
}

a:link, a:visited {
color: #000;
text-decoration: none;
}

a:hover {
color: #fff;
background-color: #000;
text-decoration: none;
}
DDD
December 14th, 2006, 07:35 PM
try giving container a height:100; and not min-height. Then place another element inside it with a height:100%; I was able to do this before I will look at the sample I have at home. Off top, I think thats it.
sodyPop
December 16th, 2006, 08:20 PM
hmm.
i tried it and still the container seems to stop at the bottom of the window. if i scroll down to additional content below the fold, it doesn't stretch.
Refined
December 17th, 2006, 06:26 PM
sodyPop, this is a shot in the dark, but try this;

Put this in your CSS


br.clear
{
clear: both;
}


Then put <br class="clear" /> just before the closing </div> tag of your container div. I saw you put <br clear="both" /> in there but I've heard somewhere of cases where the CSS equivalent works and the HTMl doesn't. I use the css version in my work in 100% height situations and it seems to work fine.

Also, min-width/height doesn't work in IE6 so there isn't much point in using it at the moment. height: 100% should be fine.
Refined
December 17th, 2006, 06:28 PM
Sorry I just noticed in your CSS you haven't set a background color of #FFFFFF for your container, so after your bg.png images finishes (you've set it to no-repeat) then it has nothing to fill itself with.

Try background-color: #FFFFFF on your container div.

[edit]

Nevermind, missed it, you did set a bg color, geez I'm tired :P
seth.aldridge
December 18th, 2006, 11:37 AM
sodyPop:

When you define 100% you are only defining 100% of the screen as it loads which is top to bottom of the browser, not the content. So the code is actually working properly. What you need to do is not define the height at all and add a margin-bottom:20px; to the container. This will give you 20px at the bottom of the container content...you don't need to add that to have it work properly, however the only information you really need in a container is the width of the container, the margin (if you want it centered), and any background. I would not put anything else in it, unless you absolutely need to.

Another thing is you are defining way too much stuff in your code:



#container {
position: relative;
margin: 0 auto;
padding: 0px; /* This is unnecessary because you created the ID container and by default it has no padding. */
min-height: 100%; /* This is not cross browser friendly and will cause more headach than you will want to deal with */
height: auto; /* You can loose this tag */
width: 800px; /* 800 x 600 is the rule, however 800 is the total width, you are not considering the scroll bars in IE or things like this. A good rule is to go with 750px */
background-color: #fff; /* You can combine all your backgrounds into one line like this "background: url(images/bg.png) no-repeat #fff; */
text-align: left; /* Unless you defined the body as text-align:center or right this is unnecessary because by default the text is aligned to the left */
background-image: url(images/bg.png);
background-repeat: no-repeat;
}

Try this code and see how it works:



#container {
position: relative;
margin: 0 auto;
width: 750px;
background: url(images/bg.png) no-repeat #fff;
}
r_ferns82
December 19th, 2006, 08:49 AM
Put min-height in pixels(100/200/300px) to make it work in mozilla. I dont think percent method works there.