当前位置：首页 → 问答吧 → Firefox-100%高度-内容高度超过窗口高度-背景延伸的问题

Firefox-100%高度-内容高度超过窗口高度-背景延伸的问题

时间：2011-04-14

来源：互联网

body,html高度100%.

当内容高度超过浏览器窗口高度时,为body定义的背景无法自动延伸到页面底部(除了IE6,其它各款浏览器都是同样的问题).

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Untitled Document</title> <style type="text/css">  </style> </head> <body><div style="height:1200px;background-color:#F90;width:500px;"></div> </body> </html>
提示：您可以先修改部分代码再运行

非常莫名其妙地是, 下面这个突发奇想的写法(100%+1),在IE6-9,FF,chrome,opera都好了.到底为什么?(100%+1)是标准写法吗?烦劳CSS高手指教,不胜感激!

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Untitled Document</title> <style type="text/css">  </style> </head> <body><div style="height:1200px;background-color:#F90;width:500px;"></div> </body> </html>
提示：您可以先修改部分代码再运行

作者: hutuu 发布时间: 2011-04-14

第一个：百分比是相对窗口而言的。为舍IE6正常呢？是被里面的DIV撑开哩！IE6标签高度有自适应性相当于 min-height
第二个：你那种写法是错误，不信你改成其它一个错误方式都一样。因此浏览器不识别。而BODY高也变成默认高了，当然会以里面DIV撑开高度为准。

作者: radom 发布时间: 2011-04-14

Radom，谢谢。那是否除了将错就错，就没有其它解决办法了呢？

作者: hutuu 发布时间: 2011-04-14

Min-height 这样写是正确的吗？

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Untitled Document</title> <style type="text/css">  </style> </head> <body><div style="height:1200px;background-color:#F90;width:500px;"></div> </body> </html>
提示：您可以先修改部分代码再运行

作者: hutuu 发布时间: 2011-04-14

哪有你写的这么麻烦..你试试看兼容么

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Untitled Document</title> <style type="text/css">  </style> </head> <body><div style="height:1200px;background-color:#F90;width:500px; "></div> </body> </html>
提示：您可以先修改部分代码再运行

[ 本帖最后由 businessDiv 于 2011-4-14 14:22 编辑 ]

作者: businessDiv 发布时间: 2011-04-14

businessDiv，谢谢关注~
虽然我也想省事，不过这样简写是不行的，不信您把里面的DIV高度改为200px，100%高度就不工作了：）

作者: hutuu 发布时间: 2011-04-14