question on 100% height bg image

[divillysausages]

hi all,

i'm currently using xhtml strict and employing a basic struture of three divs, floated beside each other, with the two outer divs acting as shadow casters for the center div, roughly like this

left_shadow - content - right_shadow
...
...

im using height:100% on the html, body and relevant div tags to get the full size of the viewport, and here's my question. if, for example your content extends down say 600px and the viewport is resized to 500px, when you then scroll down to the bottom of your content, the background image stops 100px from the end. im assuming this is because all the height settings eventually come from the viewport, which is currently 500px, so does anyone know a way around this?

to see what im on about, check out http://www.divillysausages.com/test/test.htm , resize the window up, then scroll down to the bottom

[Egor]

Hi,

Use min-height: 100%; for the modern browsers with a height: 100%; fed to IE6 and under. On the inner contents that is, not body and html.

Now, what I don't understand with your design is why you couldn't run a background image down the center of body, drawing both shadow ends and the white center with one image.

[divillysausages]

hi egor, thanks for getting back to me so quick. i tried what you said but no joy. im trying the body background image thing and it's working out better, the only reason i initially tried this approach is cause i've had problems with the body bg image before where ie would push the content out a pixel or two and the whole thing would look stupid. its not really that important that it won't work out another way, but i'm trying to increase my knowledge of xhtml and developing without using tables. cheers for the reply!

[Egor]

Edit:


I've put a quick example up here. The styles wrapped in funky-looking comment tags are a few fixes for IE6 and 5. Hopefully it's not too difficult to understand.

hi egor, thanks for getting back to me so quick. i tried what you said but no joy. im trying the body background image thing and it's working out better, the only reason i initially tried this approach is cause i've had problems with the body bg image before where ie would push the content out a pixel or two and the whole thing would look stupid. its not really that important that it won't work out another way, but i'm trying to increase my knowledge of xhtml and developing without using tables. cheers for the reply!

Ah yes, there is a pixel shift between the body background and contents when you resize the browser window. I think someone posted a fix for this issue before, but can't remember what it was.

In your case, I would still go with the body background image approach, then make the container 100% high (the shift won't be noticeable on your shadow).

<div id="page">
  <p>Contents here.</p>
</div>

* { /* Resets below values of ALL elements to 0 */
  margin: 0;
  padding: 0;
}

body, html {
  height: 100%;
}

body {
  background: #COLOUR url(images/bg-body.gif) repeat-y center center;
}

#page {
  background: #FFF;
  min-height: 100%;
  width: 700px;
  margin: 0 auto;
}

* html #page {
  height: 100%; /* For IE6 and under, as it treats height like min-height */
}

Try something like that.

[divillysausages]

thanks for that egor, im using the body background image as it has the added bonus of keeping all the content in view when you resize the image under 800px (previously there would be a 100px left box to house the left shadow). the "<!--[if lte IE 6]>" thing - is that a css style if comment, or just something that you've commented out?

[RogueJedi]

That's a conditional comment used by Internet Explorer.

http://msdn.microsoft.com/workshop/a...omment_ovw.asp