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

【问题标题】：Why doesn't CSS "height" behave like "width" on window resize?为什么 CSS“高度”在窗口调整大小时表现得不像“宽度”？
【发布时间】：2013-03-12 17:01:01
【问题描述】：

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

这是为什么？

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

【问题讨论】：

你用什么浏览器？我用chrome测试过，一切正常。提供您的实际标记。现在我怀疑你对一些父母设置了固定的高度。
最好把这个贴出来回答自己，也用CSS 来回答
你能发布一些最小的示例代码吗？

标签： html css

【解决方案1】：

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

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

编辑看看你的元素：

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

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

【讨论】：

是的，所有元素都有一个height:100%。但是高度似乎取的是窗口的高度而不是文档的高度。一旦你通过 100% 就会导致截止。（滚动）
@JimmyRare：这个答案很完整：仔细阅读关于父元素宽度和高度的部分。 100% 的宽度和高度绝不意味着文档的宽度和高度。仅供参考，没有 CSS 解决方法。这就是 HTML 的行为方式。您可以使用 javascript 并将高度设置为计算的 px 值而不是 % 来解决这个问题。
我的问题可能含糊不清。我应该问为什么 dom 没有在滚动高度上重新渲染。

【解决方案2】：

基本上 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;

【讨论】：

【解决方案3】：

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

【讨论】：

您的示例中没有可滚动的内容。