Question

我有这个简单的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边距。它只有窗户那么高。为什么？或者更重要的是，我该如何展示？我可以在这两个</div> </div>之间添加一些虚拟文字，例如'aaa'，但我觉得这不是正确的做法。

非常感谢您的帮助！

Answer 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>

Answer 2

从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>

Answer 3

摆脱蓝色背景div中的height声明。

<?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>

Answer 4

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

Answer 5

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

endash：是的！就是这个！非常感谢，也是为了解释。用填充法将最里面的div包装在另一个div中：1px效果很好！

最终版本，用于存档：



<?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>

<?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>

CSS边缘底部崩溃 - 但为什么呢？

5 个答案: