100% Height only 100% of visible page?

wuzzle · 07-10-2011, 06: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:

Code:

#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, 07:11 PM

Code:

#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, 07:51 PM

Code:

#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, 07: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, 07: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, 07:59 PM

yes, but you MUST set a height when absoluting something

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

Code:

.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, 08:01 PM

Would you recommend using relative instead?

Sammy12 · 07-10-2011, 08: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, 08: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, 08:25 PM

do you have a gmail?

wuzzle · 07-10-2011, 08:29 PM

No Gmail.

Sammy12 · 07-10-2011, 08:31 PM

filler

wuzzle · 07-10-2011, 11:06 PM

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, 01:06 PM

paste here full code....