100% height leaving gap when scrolling

fatal error

New Member
I'be been doing a very simple web recently in which I'd like to have a little green div at the right side and with some sort of a bookmark look. The code I've been using is\[code\]<style type="text/css">html, body {margin: 0px;height: 100%;font-family: Arial, Helvetica, sans-serif;}</style><div style="width:1200px; height:100%; margin:0 auto; position:relative"> <!-- Logo --> <div style="width:340px; height:395px; left:20px; position:absolute; z-index:3; background-color:#FFF; box-shadow:0px 0px 15px rgba(0, 0, 0, 0.8); text-align:center"></div> <!-- Green bg --> <div style="width:340px; height:100%; position:relative; left:20px; z-index:2; background:#D1E0BA"></div> <!-- Container and shadow --> <div style="box-shadow:0px 0px 15px rgba(0, 0, 0, 0.8); position:absolute; top:60px"> <!-- Images --> <div style="width:1200px; height:260px; background:#FFF"></div> <!-- Menu --> <div style="width:1200px; height:26px; padding: 9px 0 0; background:#999999; overflow:hidden"></div> <!-- Text --> <div style="width:740px; background-color:#FFF; padding: 50px 50px 50px 410px; text-align:justify"> </div> </div></div>\[/code\]Right now, the green bg looks right only if the total document is not longer than the browser window. If it's longer, there is a blank space at the bottom of it. I've tried do change it's position to fixed, but since everything is centered, it won't display correctly.If anybody could help, I'd greatly appreciate it.Thanks in advance!
 
Back
Top