1

我有一个网站，我需要在其中使用各种 div 来拉伸到各种动态内容的高度。据我了解，所有周围/父 div 需要 100% 高度才能使 100% 高度适用于子 div。

我将 100% 添加到 html 和 body 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。我不明白为什么会这样。有人可以向我解释或指出正确的方向吗？

谢谢

4

1 回答 1

0

经过十年的 Web 应用程序编程，我仍然感到困惑，为什么每次都是这样。我已经在许多程序员身上看到了这个问题。解释很简单。

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

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

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

当然，我不喜欢对任何元素使用“clear”属性，并且在第一行使用相关的“DOCTYPE”（如 HTML4）来解决兼容性问题会更好。

这是编辑后的版本：

    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
    <head>
        <style>
            body
            {
                height: 100%;

                margin:0;

                overflow:hidden;
            }
        </style>
    </head>
    <body>
        <div style="height: 100%; background-color: #00ff00;">
            <div style="height: 100%; border: 2px solid #ff0000;">
            </div>
        </div>
    </body>
</html>
于 2012-09-06T11:24:11.633 回答