Not signed in (Sign In)
Welcome, Guest

To enjoy a whole world of functionality, im afraid you're just going to have to sign in.

If you don't have an account, signup for one now.

Bottom of Page
Client Side: 100% height div
  1.  
1 to 9 of 9
ringedingdong
Aug 6th 2005 edited
Hi folks,

I know this is maybe a litte fast asked, but I hope somebody has a link or the code I need.

Problem:
Background-Image for the body. I also want to have one colum which goes from the top of the page to the bottom.
I thought this could be done with a divTAG but in the moment I achieve that, with using a background-image for html and one for the body.

Sounds great, but if the content gets bigger as the hight of the browser its buggy und the body background disappears.
See yourself:
hahn-alexander.de

I hope you understand, what I want and somebody has a solution.
Greetings from Germany
Alex
deus62
Aug 6th 2005
I don't get it.
Can you try to clarify?

If you use a background image on the body and make it repeat-y, the browser window size doesn't matter?

http://de.selfhtml.org/css/eigenschaften/hintergrund.htm#background_repeat

Cheers!

Whereabouts in Germany are you?
I'm in the southwest ...
ringedingdong
Aug 6th 2005
Yeah two Germans talking in English...

well I thought the background-image of the body it should go all the way down, like it always does.
But not now.

css of the body background is:
background: url(../images/hintergrund_inhalt.gif) 0px 27px repeat-y;

Maybe it does work as it should, cause of the background in the <html>


Do you see the bug, I mean when U resize the window to a heigth which is smaller than the height of the content and you scroll down, there is no background!

Ich komme aus Mönchengladbach.
Gruß
Alex
Stuart
Aug 6th 2005
don't think you have to talk in English guys, feel free to talk in whatever tounge you like :)
oduignan
Aug 6th 2005
There's probably a better way but I suggest wrapping everything in a container div and then use that to add the content bg and and add the background bg to the body. Hopefully that helps.
deus62
Aug 6th 2005
Hm.
Yep, strange. I didn't try that before.

oduignan's suggestion seems to be a good bet.

We'll just stick to English, ok? ; )

Next to Karlsruhe, about 3 km across the Rhine to the west.
Close enough to France to escape. : )
ringedingdong
Aug 6th 2005
The container method is the usual way, but I can't get it to work as I want it with the container div. The container must have a 100% hight. Does anybody know how to achieve that?

I was in France on vacation... la France est une pays magnifique... to get another language in here ; )
wisbin
Aug 7th 2005

setting the {height:100%} usually gives 2 problems:

- the browser will render it relative to the parent height. And it will be 100% of the viewport. SO you found out if you change that height, you dont get 200%.

- and if you build your #container with some absolute positioned children inside, you get a flow problem. The children generate no layout (dimensions), so the #container doesnt contain them anymore. You can get this right with the well known Holly hack. Google it and you will see a solution with a .clearfix (it puts a period after the #container, so all the children inside it are captured).


Back to your problem



I think you should not use the html element, or 100% height anyway. But if you must, check out this: http://www.quirksmode.org/css/100percheight.html

I would use the body for your bg image (repeat) and I would try to make all other backgrounds in your blog container or . It is fixed width, so you could repeat the y-way easily. Then use the top and bottom for the .. uh.. top and bottom background.

viel spaz! :p
ringedingdong
Aug 7th 2005
I thought something about that. I really can't understand, why IE lacks with the standards so much, but that Firefox doesn't understand easy things... well as time goes by... hope is still in me...

I now have a 3000x100px background-image. Working well, but its a little bit big.

Thank you much, I'll be back with more questions.
=)
  1.  
1 to 9 of 9
Top of PageBack to discussions
Feeds | Bug Report | Terms of Service | Documentation
Lussumo Vanilla (0.9.2) Copyright © 2001-2005
Historical archive. This is a preserved copy of 36 Degrees Design (2005–2008), the early web-design weblog of Stuart Frisby. It is maintained independently as a piece of web history and is not operated by, affiliated with, or endorsed by Stuart Frisby. If you are the original owner and would like this domain returned, get in touch — it’s yours, no fuss.
Article Archive