0

我有这个简单的 xhtml：

<?xml version="1.0" encoding="UTF-8"?>    
<!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" style="height: 100%;">
<head>
</head>
<body style="height: 100%;">
  <div style="height: 100%; overflow: auto; background-color: #00f;">
    <div style="height: 400px; margin-bottom: 2000px; background-color: #f00;"></div>
  </div>
</body>
</html>

它显示了两个矩形 - 但较低的（蓝色）一个不显示 2000px 边距。它只有窗户那么高。为什么？或者更重要的是，我如何让它展示出来？我可以在这两者之间添加一些像“aaa”这样的虚拟文本，</div> </div>但我认为这不是正确的做法。

非常感谢您的帮助！

4

5 回答 5

1

如果您希望 400px div 下方有 2000px 的蓝色，请进行以下更改：

将包含 div 的高度更改为其内容的高度 + 2000px 空间。

<?xml version="1.0" encoding="UTF-8"?>

<!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" style="height: 100%;">

<head> </head>

<body style="height: 100%;">

  <div style="height: 2400px; overflow: auto; background-color: #00f;">

    <div style="height: 400px; background-color: #f00;">
    </div>

  </div>

</body>

</html>
于 2009-01-28T02:21:06.527 回答
0

删除您height: 100%的<body>：

<?xml version="1.0" encoding="UTF-8"?>
<!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" style="height: 100%;">
<head>
</head>
<body>
  <div style="height: 100%; overflow: auto; background-color: #00f;">
    <div style="height: 400px; margin-bottom: 2000px; background-color: #f00;"></div>
  </div>
</body>
</html>
于 2009-01-28T02:41:29.357 回答
0

去掉height蓝色背景 div 中的声明。

<?xml version="1.0" encoding="UTF-8"?>    
<!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" style="height: 100%;">
<head>
</head>
<body style="height: 100%;">
  <div style="background-color: #00f;overflow:auto">
    <div style="height: 400px; margin-bottom: 2000px; background-color: #f00;"></div>
      </div>
</body>
</html>
于 2009-01-28T02:45:48.053 回答
0

这是因为您在包含 div 上设置了高度。边距不是内容，因此它们不会触发溢出。您可以在最里面的 div 周围添加另一个 div，并给它一个 1px 的填充，或者，正如其他人建议的那样，您可以调整现有的包含 div。

于 2009-01-28T02:49:51.277 回答
0

lotusvskoi：谢谢，但是身体滚动，而不是外部 div。

恩达什：是的！就是这个！非常感谢，也谢谢你的解释。用 padding: 1px 将最里面的 div 包裹在另一个 div 中效果很好！

最终版本，用于存档：

<?xml version="1.0" encoding="UTF-8"?>
<!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" style="height: 100%;">
<head>
<style>
</style>
</head>
<body style="height: 100%;">
<div style="height: 100%; overflow: auto; background-color: #00f;">
<div style="padding-bottom: 1px;">
<div style="height: 400px; margin-bottom: 2000px; background-color: #f00;">
</div>
</div>
</div>
</body>
</html>

于 2009-01-28T02:59:24.423 回答