Question

我有一个网站，我需要各种div来扩展到各种动态内容的高度。根据我的理解，所有周围/父div必须是100％高度，以便100％的高度适用于子div。

我添加了100％的html和身体css，一切都很糟糕。我花了很多时间来研究和解决这个问题，并把它归结为一个非常基本的失败的例子。

任何人都可以解释原因

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<style>
html,body{
    height:100%;
}
</style>
</head>
<body>
<div style="height:100%; background-color:#00ff00;">
    <div style="height:3000px; border:2px solid #ff0000;">
        <br style="clear:both;" />
    </div><br style="clear:both;" />
</div>
</body>
</html>

表现不像我想象的那样？我希望内部div能够延伸父div。我不明白为什么会这样。有人可以向我解释这个问题，还是指向正确的方向？

由于

Answer 1

经过十年的网络应用程序编程，它仍然让我感到困惑为什么每次都这样。我已经看到这个问题对许多程序员。解释很简单。

在HTML中，布局系统有一个名为display的主要CSS选项。 display选项有两个主要值可以改变输出中您想看到的所有内容。第一个值为block，第二个值为inline，第三个值为上述值inline-block的组合。当某个元素的display值为block时，它会水平阻塞所有内容，并且不会在其旁边放置任何元素。但是height没有选项可以做同样的事情。

据我所知，当您将height值设置为100%时，您必须手动计算值的边距和边框宽度！问题是当您设置{的值时{1}} {}为} width为body的属性，body元素中的默认值100%不为'0'！输出看起来像狗屎，因为它是愚蠢的滚动。因此，您必须将margin设置为'0'（在'body'元素上）。

另外一个问题是当你做了边距并且滚动得到修复时，你肯定应该将'body'元素的'overflow'属性设置为margin或hidden，而不是'滚动' '这是'display'选项的默认值。它是高度计算公差的后门！您将在输出中自己看到它。

当然，我不希望对任何元素使用'clear'属性，并且在第一行使用相关的'DOCTYPE'（如HTML4）以获得兼容性问题会更好。

以下是修改后的版本：

visible

在基本示例中没有伸展

1 个答案: