...

View Full Version : 100% Height only 100% of visible page?



wuzzle
07-10-2011, 07:35 PM
I have a website that I'm working on (My first CSS site so I'm sure the code is TERRIBLE!)

Anyways, the link is

http://goopgaming.com/indextest.php

As you can see I have a bright blue background in my main content area to show my issue. If you scroll down, the blue background stops and doesn't go all the way to the bottom of the actual content. My CSS is:


#contentcontainer {
background-color: blue;
visibility: visible;
position: absolute;
width: 1200px;
height:100%;
top: 33px;
margin-left: auto;
margin-right: auto;
}



Can anyone help/explain to me what's wrong? I've been having huge issues trying to get an extendable background color depending on how much content is on the page!

Thank you!

Sammy12
07-10-2011, 08:11 PM
#headlinetext {
visibility: visible;
position: absolute;
left: 52px;
top: 500px;
z-index: 4;
width: 770px;
}


needs a height. whenever you absolute, float, or take an element outside of its normal flow, you need to set a
height or use clearfix/clear or else it will register as height: 0;

wuzzle
07-10-2011, 08:51 PM
#headlinetext {
visibility: visible;
position: absolute;
left: 52px;
top: 500px;
z-index: 4;
height: 100%;
width: 770px;
}


Did not seem to fix the problem unfortunately. Anything else you can think of that I should look at?

Sammy12
07-10-2011, 08:55 PM
height: 100%; will set the height equal to the height of the screen (700-900px). try setting the height to 1700px; to headline and contentContainer

wuzzle
07-10-2011, 08:58 PM
Wont setting the height to a set pixel amount mean that it wont get bigger or smaller depending on the content on the page?

Tables seemed so much easier... lol :)

Sammy12
07-10-2011, 08:59 PM
yes, but you MUST set a height when absoluting something

http://www.positioniseverything.net/easyclearing.html



.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}


if the content height is over say 500px or indefinite (comments) I would suggest using clearfix ^

wuzzle
07-10-2011, 09:01 PM
Would you recommend using relative instead?

Sammy12
07-10-2011, 09:05 PM
Honestly, if you write a page the right way the first time (without absoluting), the website will work on all browsers bug-less, and smoothly. PM me if you want me to help you out. The website you have written will run into many more errors later on :)

wuzzle
07-10-2011, 09:22 PM
It wont let me pm you for some reason, but feel free to add me on skype: ian.c.gillespie

maybe we can work something out!

Thanks for your help again, really do appreciate it, i'm really new to this.

Sammy12
07-10-2011, 09:25 PM
do you have a gmail?

wuzzle
07-10-2011, 09:29 PM
No Gmail.

Sammy12
07-10-2011, 09:31 PM
filler

wuzzle
07-11-2011, 12:06 AM
Just want to say Sammy12 is a very valuable member of this community. His help has been more than amazing. I never expected someone I don't even know to go out of there way for more than a hour to try and help me out.

Thank you!

vikram1vicky
07-11-2011, 02:06 PM
paste here full code....



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum