Javascript 使div充满屏幕_Javascript_Html_Css

Javascript 使div充满屏幕

javascript html css

Javascript 使div充满屏幕,javascript,html,css,Javascript,Html,Css,我有一件特别容易的事要做，但它不起作用。body元素中有一个div&它应该是浏览器屏幕的宽度和高度（减去body的边距）。但是，div仅为1行的高度（但具有正确的宽度）我做错了什么？ <!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

我有一件特别容易的事要做，但它不起作用。body元素中有一个div&它应该是浏览器屏幕的宽度和高度（减去body的边距）。但是，div仅为1行的高度（但具有正确的宽度）

我做错了什么？

<!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>


</body>
</html>


abcd

在css中使用此选项：

body, html {
    height: 100%;
}

@麦克；像这样将

绝对位置

赋予您的div

#main{
    height: 100%;
    width:100%;
}

这里限制您的是

html

元素的高度。

body

元素被设置为100%高度，但由于它的容器（

html

）没有指定高度，因此body将仅为

html

高度的100%，而这并不是什么

正如Ravan（+1）之前所建议的，您需要将html高度设置为100%。我通常还会在这里添加填充、边距和宽度“重置”

html, body {
    height: 100%;
    width: 100%;
    margin: 0;
    padding: 0;
}