Ok, so I got a layout made only with CSS.

 

 

 

I have a background div with 100% height and that's all good with pages which don't scroll, for all browsers.

 

 

 

 

 

 

 

Now the problem is when pages scroll, in FF the div doesn't extent all the way to the bottom, more so stops where the page starts to scroll.

 

 

 

 

 

 

 

Like it looks like:

 

 

 

     |                |



    | +------------+ |



    | |            | |



    | |            | |



    | +------------+ |



    | +------------+ |



    | |            | | <-- scroll starts here



      +------------+



      +------------+



      |            |



      +------------+

 

 

 

 

 

 

 

So all the other elements are fine, just the background div doesn't keep extending down to the bottom like it should...

 

 

 

 

 

 

 

eg:

 

 

 

     |                |



    | +------------+ |



    | |            | |



    | |            | |



    | +------------+ |



    | +------------+ |



    | |            | |



    | +------------+ |



    | +------------+ |



    | |            | |



    | +------------+ |

 

 

 

 

 

 

 

 

 

 

 

I hope you people got the basic gist of that :-?

 

 

 

Is this a bug with the FF rendering, or just something I gotta add / change to fix it :-?

 

 

 

 

 

 

 

If anyone cares this is the relevant css:

 

 

 

html, body{



  /*** Font ***/



  font-family: Verdana, Arial, Helvetica, sans-serif;



  font-size:   10px;



  text-align:  center;



  /*** Margins and borders ***/



  margin-left:   auto;



  margin-right:  auto;



  margin-top:    0px;



  margin-bottom: 0px;



  padding:       0px;



  /*** Dimensions and colours ***/



  height:           100%;



  background-color: #000000;



}







#frame {



  /*** Font ***/



  font-family: Verdana, Arial, Helvetica, sans-serif;



  font-size: 10px;



  text-align: center;



  /*** Margins and borders ***/



  margin-left:   auto;



  margin-right:  auto;



  margin-top:    0px;



  margin-bottom: 0px;



  padding:       0px;



  border-left:   1px dashed #323232;



  border-right:  1px dashed #323232;



  /*** Dimensions and colours ***/



  width:            650px;



  height:           100%;



  background-color: #191919;



}

 

 

 

 

 

 

 

 

 

 

 

I haven't checked if the same problem occurs in Opera or not (haven't been home to do so) so if anyone feels like testing it out, go for it.

A percentage height on the root element is relative to the viewport.

 

 

 

 

 

 

 

Which means height: 100% on html / body will make it 100% of the viewport (not the full page). Thus, Firefox is rendering this correctly. Unless I'm very much mistaken, Opera will render it the same.

 

 

 

 

 

 

 

I think you'll have to fiddle with positioning to get this to happen cross-browser. Googling around, it seems the problem can be given various solutions, which are probably page specific.

 

 

 

 

 

 

 

Anyhow, maybe changing the 'height: 100%' to 'min-height: 100%' would fix it :).

Just checked then and Opera rendered it the same as FF.

 

 

 

Anyhow, min-height: 100% did the trick :)