2

如果我在 css 中的某个元素上设置 100% 宽度，则当我调整浏览器窗口大小时，该元素将调整。如果我改为将高度设置为 100%，则在调整窗口大小时元素不会更新，相反，如果窗口扩展超出初始 100% 高度，则内容将被截断。

为什么是这样？

编辑：滚动是问题。它不会在滚动时调整大小。让网站看起来被切断。

4

3 回答 3

1

基本上，div 的高度受到 body 和 html 父级的固定高度的限制。

尝试：

的HTML

<div id="full">
    Content
</div>

CSS

html, body {height: 100%;}
#full {position: relative; display: table; width: 100%; height: 100%; background: #CCC;}

或者，如果您愿意：完整标记

<!DOCTYPE html>
<html>
    <head>
        <style>
            html, body {height: 100%;}
            #full {position: relative; display: table; width: 100%; height: 100%; background: #CCC;}
        </style>
    </head>
    <body>
        <div id="full">
            Content
        </div>
    </body>
</html>

关键是设置height:100%和显示属性display:table;

于 2013-03-12T08:48:56.143 回答
1

Height: 100%意思是“和我的父元素一样高”。所以，如果你的父元素只有 300px 的高度，你的子元素也只能是最大 300px 的高度。宽度也是如此，但块级元素默认占用所有可用的水平空间。

请注意，这不适用于内联元素，它们一起忽略高度/宽度。

编辑看看你的元素：

<html>
<body>
<div class="wrapper">
</div><!-- end wrapper -->
</body>
</html>

body你的元素有多高？是100%吗？html你的元素有多高？是100%吗？

于 2012-09-18T12:07:34.863 回答
0

它工作正常试试这个DEMO 你的代码可能有问题

于 2012-09-18T12:05:22.160 回答