Making a div fill the screen
I have an exceptionally easy thing to do, but its not working. I have a div inside the body element & it should be the width & height of the browser screen (minus the body's margin). But instead the div is only the height of 1 line (but has the correct width).
What am I doing wrong?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><!-- InstanceBegin template="/Templates/homepage.dwt" codeOutsideHTMLIsLocked="false" -->
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style type="text/css">
<!--
html, body, div, form, fieldset, legend, label, img { margin: 0; padding: 0; } table { border-collapse: collapse; border-spacing: 0; } th, td { text-align: left; } h1, h2, h3, h4, h5, h6, th, td, caption { font-weight:normal; } img { border: 0; }
body { text-align: center; background-color: RGB(255, 255, 255); margin: 20px; height: 100%; width: 100%; }
#outerContainer { background-color: #DCFF9A; height: 100%; width: 100%; }
-->
</style>
<script type="text/javascript">
<!--
-->
</script>
</head>
<body>
<div id="outerContainer"> <!-- Why doesn't this div have the height & width of the whole screen? It's height appears to be one line -->
<p id="testData"> abcd </p>
</div&开发者_高级运维gt;
</body>
</html>
the thing that is limiting you here is the height of the html element. the body element is set at 100% height but since it's container (html) doesn't have a height assigned, the body is only going to be 100% of the html height which is nothing
as suggested before by Ravan (+1) :), you need to set the html height to 100%. I usually also add the padding, margin and width 'resets' here also
html, body {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
Use this in your css:
body, html {
height: 100%;
}
@mack; give position absolute to your div like this
#main{
height: 100%;
width:100%;
}
加载中,请稍侯......
精彩评论