CSS Body Tag Height Limits to Visisble Area Only_问答_开发者

CSS Body Tag Height Limits to Visisble Area Only

开发者 https://www.devze.com 2023-04-12 03:54 出处：网络

I am redesigning this site: http://puffandpass.co.za/ with this design: http://puffandpass.co.za/incubator/ (this is incomplete hey..)

I am redesigning this site: http://puffandpass.co.za/

with this design:

http://puffandpass.co.za/incubator/ (this is incomplete hey..)

The Design has the following structure:

 <html>

     <body>
            <div id="wrapper">
                     <div id="page">
                             *//content goes here*
                      </div>
            </div>
   </body>
</html>

Now here is my CSS for each of the above tags:

html, body          { 
color: #000;background: #3B5998; 
font:  10px Helvetica, Arial, Verdana,sans-serif; 
height: 100%; 
line-height: 1.5em;
text-align:center; 
}

#wrapper            { 
background: none repeat scroll 0 0 #123569;    
border: 0.5em solid #123569;   
 height: 100%;    
margin: 0 auto;    
width: 102.4em;
}


#page               { 
background: none repeat scroll 0 0 #FFFFFF;   
float: left;  
text-align: center;    
width: 102.4em;
 }

[The problem] The height of the html, bo开发者_如何学Pythondy (and so the #wrapper) tags limits to the visible area of the of the screen. This means that the contents of the #page tag overflow outside the #wrapper. The height gets worse (smaller) when I have Firebug open.

Question: What am I doing wrong?

Thanks in advance.

On #wrapper, change height to min-height.

Due to having height: 100% on the parent elements, this will force #wrapper to have a minimum height of 100%, instead of the height being exactly 100% with no allowance to increase.

Then, on #page remove position: absolute and float: left.