Question

我没有看到任何理由为什么这个片段不能扩展到100％的屏幕...有谁知道......我想是这样的......我只是不明白它，这里是一个小提琴： http://jsfiddle.net/uuzbv/

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
body{
width:100%;
height:100%;}

.section{
    height:100%;
    width:100%;
    background-color:#000;
    }
</style>
</head>

<body>
<div class="section">

</div>


</body>
</html>

Answer 1

使用：

body, html {
   width:100%;
   height:100%;
}

Answer 2

您可以尝试添加到html dom元素。没有任何内容很难说清楚。

*{width:100%;height:100%;}

Answer 3

在html，body和section上使用属性width:100%（如果想要拉伸完整视口）是不情愿或不需要的，因为默认情况下它们都被拉伸到完整视口。你可以像height: required pixels那样设置所需像素的高度，也可以使用不间断空格 

Answer 4

这是定位的本质。默认情况下，您的元素设置为position:static，这基本上表示元素将在文档中出现时定位。因此，您在<body>元素中定义的百分比高度必须遵守<html>元素设置的高度规则。在这种情况下，基本上是默认的空元素高度。如果您注意到，将正文上的位置设置为类似absolute or fixed的内容会突然扩展框（而relative则不会）。这是因为您要从正常的页面流中删除它。

但是，正如大多数人所指出的那样，设置html和body元素的高度/宽度将解决这个问题，这就是我的建议。事实上，在大多数网页上，我通常都是从：

开始

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

这基本上可以为您提供在页面正文中使用的完整窗口空间。

HTML基础知识：为什么div不能缩放到100％

4 个答案: