3 replies [Last post]
bjarman.org
Offline
Regular
Sweden
Last seen: 17 years 3 weeks ago
Sweden
Joined: 2004-02-17
Posts: 11
Points: 0

Hi, I need to have a 100% height on a centered div but it seems to be impossible to get it to work as intended. Render bugs appear if page is resized, the div does not expand/contract correctly. i know it is possible to have absolutely positioned divs expand to 100% of the viewport but is it possible with relatively positioned ones, and if so, HOW? The page I'm working on has a relatively positioned div which is 600px wide and has left and right margins set to auto, thus centered, I want this div to have heigth:100% so I have my body set to height:100% and the div also. Any clues? BR / Fredrik

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 5 days 19 hours ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5343
Points: 2964

height:100%; on centered div, is it possible?

Hi bjarman.org,
Make sure you use html, body{height:100%;} also have the page in standards mode.
Then you should get the centered div to be 100% of the viewport.

Hope that helps

bjarman.org
Offline
Regular
Sweden
Last seen: 17 years 3 weeks ago
Sweden
Joined: 2004-02-17
Posts: 11
Points: 0

height:100%; on centered div, is it possible?

Yes, that's what I did, and it still did'nt work, however I found the error, it was a floating div that had no block element below so content was "spilled" over the surrounding div that had height:100%; , it works now. Thanks for the fast reply Smile
Br / Fredrik

bjarman.org
Offline
Regular
Sweden
Last seen: 17 years 3 weeks ago
Sweden
Joined: 2004-02-17
Posts: 11
Points: 0

height:100%; on centered div, is it possible?

...however, i have found an interesting bug in Safari ( Mac OS X Browser) , when viewport is configured to not show the bokkmarks bar the browser miscalculates the height of the viewport, leaving about 10px in the bottom of the page although div height is set to 100%, annoying...