14 replies [Last post]
blextar
Offline
Regular
italy
Last seen: 15 years 43 weeks ago
italy
Timezone: GMT+1
Joined: 2004-02-08
Posts: 13
Points: 0

'hello world'!
i'm having the well known problem of height 100%. now, i've had this problem already and i've already solved it tons of time. BUT, i was probably wrong. i thought i knew how to make my page stretch through all the height of the screen, but if you try takin' a look at www.disinformati.net or www.nuovafrancosuisseitalia.com/rc1 with a 1280x1024 resolution you'll see that the trick is no more workin..

for the css see:

www.disinformati.net/themes/blextar_light/style.css
www.nuovafrancosuisseitalia.com/rc1/themes/blextar/style.css

--> oh, about the first page there is also a png transparency problem. i used the code that microsoft suggests to use as a work around for IE png bug, but for some reasons it doesnt work all the time. im still not sure about the versions of IE in which its not workin. any suggestion?

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 7 years 11 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

1280 x 1024 , div height: 100%

To get your page to fill the view port, try

html, body {height:100%;}

blextar
Offline
Regular
italy
Last seen: 15 years 43 weeks ago
italy
Timezone: GMT+1
Joined: 2004-02-08
Posts: 13
Points: 0

1280 x 1024 , div height: 100%

jeh sure man Wink , ive done that (look at the css source).

html,body{
margin: 0;
padding: 0;
height: 100%;
font-family: Verdana, sans-serif;
font-size: 90%;
background: #ffe8e3 url(back.gif) center center repeat-y;
}

..any better suggestion?

blextar
Offline
Regular
italy
Last seen: 15 years 43 weeks ago
italy
Timezone: GMT+1
Joined: 2004-02-08
Posts: 13
Points: 0

1280 x 1024 , div height: 100%

help ](*,) ...

HellsBells
HellsBells's picture
Offline
Leader
Bedford, UK
Last seen: 11 years 31 weeks ago
Bedford, UK
Joined: 2004-04-07
Posts: 851
Points: 0

1280 x 1024 , div height: 100%

I understand that English may not be your first language - but maybe "any other suggestions" would have been a better choice of words that "..any better suggestion" !

My strategy is so simple an idiot could have devised it!

"Also, your CSS (no offence) makes me want to gouge my eyes out with a rusty spoon" - TPH

leroysolay
Offline
newbie
Cleveland, OH
Last seen: 14 years 29 weeks ago
Cleveland, OH
Timezone: GMT-5
Joined: 2005-05-19
Posts: 9
Points: 0

1280 x 1024 , div height: 100%

How about setting the #footer with a bottom: 0%?

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 7 years 11 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

1280 x 1024 , div height: 100%

Can you describe exactly what you see the problem as? Perhaps with a screen shot pointing out what you see as going wrong.

blextar
Offline
Regular
italy
Last seen: 15 years 43 weeks ago
italy
Timezone: GMT+1
Joined: 2004-02-08
Posts: 13
Points: 0

1280 x 1024 , div height: 100%

better is what i wrote, better is what i meant. i know that's the trick, but its not workin. or maybe im applying it in the wrong way..

anyway, here it comes the screenshot:

http://www.blextar.net/shot1.jpg

http://www.blextar.net/shot2.jpg

the footer is in both screenshots supposed to be at the bottom of the screen Tongue ..(in the "salmon coloured" one the background image is reapeated-y in order to drop the shadow and extend the main coloum to the bottom Tongue )

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 7 years 11 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

1280 x 1024 , div height: 100%

maybe this will help http://wiki.jalakai.co.uk/layout5.htm, it uses a spacer element to keep the footer at the bottom.

There is a better way to achieve the same thing using height:100% and padding on the container to leave space for the footer. I will see if I can find a link the thread which shows it in action.

[edit: bah, can't find it]

blextar
Offline
Regular
italy
Last seen: 15 years 43 weeks ago
italy
Timezone: GMT+1
Joined: 2004-02-08
Posts: 13
Points: 0

1280 x 1024 , div height: 100%

Thank you very much Wink , ill try this one for the moment!

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 4 years 47 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

1280 x 1024 , div height: 100%

Methods to play around with:
Set your container to height:100%/viewport height with footer placed after it in flow cleared both if needed, negative margin on the bottom of the container the height of the footer to allow the footer to sit at bottom of viewport then either bottom padding on the container to stop content disappearing behind the footer or place a empty div the height of the footer at the bottom of the container to prevent text/content going any further.

Hugo.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

blextar
Offline
Regular
italy
Last seen: 15 years 43 weeks ago
italy
Timezone: GMT+1
Joined: 2004-02-08
Posts: 13
Points: 0

1280 x 1024 , div height: 100%

i tried with a simple

#footer{
position: absolute;
bottom: 0;
width: 564px;

(...)

and it looks like its workin'..i hope this wont create any new problem, thanks for your help Wink

blextar
Offline
Regular
italy
Last seen: 15 years 43 weeks ago
italy
Timezone: GMT+1
Joined: 2004-02-08
Posts: 13
Points: 0

1280 x 1024 , div height: 100%

oh no, dumb me, hehe, that's absolute Tongue ...

blextar
Offline
Regular
italy
Last seen: 15 years 43 weeks ago
italy
Timezone: GMT+1
Joined: 2004-02-08
Posts: 13
Points: 0

1280 x 1024 , div height: 100%

(to Hugo) emm, after this quite funny try (absolute positioning) im trying to understand what you wrote me Tongue

1) i need to set container height to 100%, ok.
2) place the footer after it (right outside the container)
3) "placed after it in flow cleared both if needed.." sorry, im actually not so expert, what does this mean Tongue ?
4) set negative margin-bottom for the container
5) set padding-bottom in order to avoid the text going under the footer

ok, i think ive got them al but im probably missing the third step ..

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 7 years 11 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

1280 x 1024 , div height: 100%

An example using height:100%, margin-bottom: -(footer-height); padding-bottom: (footer-height). http://wiki.jalakai.co.uk/layout7

It isn't the simplest possible example as it floats all three columns to ensure the main content comes first in source order and because of that it requires the margin-bottom, padding-bottom trick on the outer column divs as well as a margin-bottom on the wrap. This is necessary as if you put the padding-bottom on the outer_wrap a scroll bar will appear even when the content fills the viewport (this is because height:100% + padding means more than 100%).