How to strech the red part to all of the page length (almost 100% height) ?

[bondnobond]

I spent hours on google, and found out how to make rounded corners without images :-)

Now I would like to know how can I strech the red zone, to be almost 100% height, even if he containt only a few lines,
So the red part height will strech to almost 100% height, the "Footer" will be always at the buttom of the browser, right after the end of the red zone.

http://img2.timg.co.il/forums/1_120959261.html

[mburt]

Change:

div.box-contents {position: relative; padding: 8px; color:white;}


to:

div.box-contents {position: relative; padding: 8px; color:white;height:100%}

[bondnobond]

Change:

div.box-contents {position: relative; padding: 8px; color:white;}


to:

div.box-contents {position: relative; padding: 8px; color:white;height:100%}


Thanks, but I already tried it, with no success :
http://img2.timg.co.il/forums/1_120962202.html

[Medyman]

Add the following CSS styles:


html,body, div#content, div.rounded-bod, div.box-contents {
height:100%;
}

[Moshambi]

I spent hours on google, and found out how to make rounded corners without images :-)


Can you post the link to where you found out how to do this? I am very interested to see how that works.

[rangana]

Visit Jonathan Snook's blog (http://snook.ca/archives/html_and_css/rounded_corners_experiment_ie/).

[Medyman]

Visit Jonathan Snook's blog (http://snook.ca/archives/html_and_css/rounded_corners_experiment_ie/).

I wouldn't recommend the method that Jon uses there (nor does he, for that matter).

If you're using Fx3 or Safari, the rounded-corner CSS3 property is supported. That could be an option.

[Moshambi]

yes i know about -moz-border-radius for firefox but how did he get his to be round in IE as well? Is there -moz-border-radius that works in IE maybe? Im just confused...

[Medyman]

yes i know about -moz-border-radius for firefox but how did he get his to be round in IE as well? Is there -moz-border-radius that works in IE maybe? Im just confused...

No...that would be too easy. Currently, IE doesn't support border radius.

If you wanted to, you could do it via the technique that rangaga reported. But, then you would be implementing browser-specific code, which I never like to do (and it's against "best practices").

It's probably a buch better idea to use any of these methods (http://www.smileycat.com/miaow/archives/000044.php).

[bondnobond]

The following URL already looking better, thanks :-)
(The trick with the 100% and 94% is working)

http://img2.timg.co.il/forums/1_120994903.html

But when I resize the browser window (make it smaller), Than a little vertical scrolling appear.
Or even if the link open in a none maximize windows - the same problem occur.

Does anybody knows why ? How can I avoid it ? (Maybe another trick than the 100%, 94% ?)

Thanks.

[mburt]

Set this to your body:


body { overflow: hidden; }

However, then you can't scroll period.

[bondnobond]

I don't want to disable scrolling,
I just want it to be 100% height
(The header + the red zone + the footer)