Forum Moderators: not2easy
Simply make a div have a 20px top margin and take up the rest of the height of the screen, WITHOUT making the div larger than 100% of the height of the screen (i.e., make the vertical scroll bar not show up)
Here is the code i think should work.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Silly div</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<style type="text/css">
html
{
width:100%;
height:100%;
}
body
{
width:100%;
height:100%;
margin:0px;
padding:0px;
border:0px;
background-color:#000000;
}div
{
position:static;
}#wrapper
{
background-color:#989898;
width:100%;
height:100%;
}#content
{
margin-top:20px;
background-color:#dedede;
height:100%;
width:80%;
margin-left:auto;
margin-right:auto;
}</style>
</head><body>
<div id="wrapper">
<div id="content"></div>
</div>
</body>
</html>
*tufts of hair fall lazily to the ground*
I did try your change though (Changing margin-top to padding-top ) and it is even more wacky.
In that case, the inner div (content) actualy flows out of its container (wrapper).
Although I know this can happen with images or text, im unused to it occurring in this instance, here no content is pushing it larger. Even so, changing its overflow property to "hidden" does nothing to the overflowing over the bottom of the wrapper div.
Thank you, though, Reflection
This thread [webmasterworld.com] from the css library might have some info in it that could help you.
html
{
width:100%;
height:100%;
margin-bottom: -20px;
}
Add some to the top; chop some from the bottom. :)
Jordan
