Question

如果我在css中的元素上设置100％宽度，则在调整浏览器窗口大小时此元素将会调整。如果我将高度设置为100％，则在调整窗口大小时元素将不会更新，而是如果窗口扩展超出最初的100％高度，内容将会切断。

为什么会这样？

编辑：滚动是个问题。它不会在滚动时调整大小。让网站看起来停止了。

Answer 1

Height: 100%表示“与我的父元素一样高”。因此，如果您的父元素的高度仅为300px，则您的子元素最多也只能为300px。对于宽度也是如此，但是块级元素默认占用它们可用的所有水平空间。

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

编辑查看您的元素：

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

您的body元素有多高？是100％吗？你的html元素有多高？这是100％吗？

Answer 2

基本上div的高度受到身体和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;

Answer 3

工作正常试试DEMO 您的代码可能存在问题

为什么CSS“高度”在窗口大小调整时不像“宽度”？

3 个答案: