Html 基本示例中的Div未拉伸
我有一个网站，我需要在其中的各种div延伸到各种动态内容的高度。据我所知，所有周围/父div都需要100%的高度，才能在子div上使用100%的高度 我添加了100%的html和主体css，一切都糟透了。 我花了很多时间试图研究和解决这个问题，并把它归结为一个非常基本的失败例子 有人能解释为什么吗Html 基本示例中的Div未拉伸,html,stretch,Html,Stretch,我有一个网站，我需要在其中的各种div延伸到各种动态内容的高度。据我所知，所有周围/父div都需要100%的高度，才能在子div上使用100%的高度 我添加了100%的html和主体css，一切都糟透了。 我花了很多时间试图研究和解决这个问题，并把它归结为一个非常基本的失败例子 有人能解释为什么吗 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1
<!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>
谢谢在编写了十年的web应用程序之后，我仍然很困惑为什么每次都是这样。我在许多程序员身上看到过这个问题。解释很简单 在HTML中，布局系统有一个名为display的主CSS选项。显示选项有两个主要值，用于更改输出中您希望看到的任何内容。第一个值是block，第二个值是inline，第三个值是上述值的组合inline block。当某个元素的显示值为block时，它会水平阻止所有内容，并且不会在其旁边放置任何元素。但是，对于高度，没有选项可以执行相同的操作 据我所知，将高度值设置为100%时，必须手动计算值中的边距和边框宽度！，问题是，当您为body将width属性的值设置为100%时，body元素中margin的默认值不是“0”！输出看起来像狗屎，因为它在愚蠢地滚动。因此，必须将“body”元素的边距设置为“0” 另外一个问题是，当您执行边距操作并修复了滚动时，请确保您应该将“body”元素的“overflow”属性设置为hidden或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>
这似乎并没有解决我的问题。我需要客栈部满足地舒展筋骨。反过来，需要允许用户查看所有内容。在上面的示例中，我无法看到内部div底部的边框。两个div的大小似乎与浏览器IE 100%高度中的查看区域相同。由于边框的原因，内分区稍微大一些，因此我需要另一个绿色分区来拉伸以固定内分区。例如，如果内分区充满内容，我需要绿色分区来拉伸以适应末端，我需要能够滚动内容。