将div高度扩展到整个网页

问题描述

| 有没有办法使用CSS将div的高度扩展到整个网页？我没有用

.height
 {
  height:100%;
  }

但这只会扩展到div内部内容的高度。即使其中仅包含一行内容，该div仍应覆盖整个网页。

解决方法

<div><!-- make a <div> to hold everything in.. -->

<div style=\"width:125;height:100%;\">blah blah blah</div>

<div style=\"height:100%;\">blah blah blah</div>

</div>

,确保所有父项都设置了高度。 html / body /等该元素将采用其父级高度的100％，但前提是父级必须具有高度。未设置高度的100％将导致另一个未设置高度;） ,使用min-height属性。

.height {
   min-height: 100%;
}

但这很大程度上取决于您未提供的上下文。 ,这为我工作：

<html>
    <head>
        <style type=\"text/css\">
            body {
                margin: 0;
                padding: 0;
            }

            #wholepage {
                height: 100%;
                width: 100%;
                background: red;
                color: white;
                font-weight: 800;
                font-size: 22px;
                font-family: sans-serif;
            }
        </style>
    </head>
    <body>
        <div id=\"wholepage\">
            Simple Test
        </div>
    </body>
</html>

,您可能必须为<html>和<body>元素指定高度：

<!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\" xml:lang=\"en\" lang=\"en\">
<head>
    <title>extend div height to entire webpage</title>
    <style type=\"text/css\">
        html,body {
            height:100%;
        }
        #tehDiv {
            height:100%;
            background:red;
        }
    </style>
</head>
<body>
    <div id=\"tehDiv\">Example</div>
</body>
</html>

div div 扩展到整个整个网页网页高度高度

将div高度扩展到整个网页

问题描述

解决方法

相关问答