我有以下代码用于显示带有滚动结果部分的搜索工具.在IE中代码工作正常:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html style="background:black;height:100%;width:100%;"> <head> <title>Report</title> </head> <body style="background:black;"> <table HEIGHT="100%" WIDTH="100%" style="background:red;"> <tr> <td> Search Area </td> </tr> <tr> <td HEIGHT="100%" WIDTH="100%" style="background:orange;"> <div style="overflow-y:scroll;height:100%;"> <table style="width:100px;height:1000px;"> <tr> <td style="background:white;"> Results Area </td> </tr> </table> </div> </td> </tr> </table> </body> </html>
<Meta http-equiv='X-UA-Compatible' content='IE=edge' />
底部DIV标记扩展到页面之外.我已经尝试了很多选项但是没有实际指定值的高度就无法找到解决方法.这不起作用,因为我希望页面占据屏幕的100%,无论浏览器窗口的大小.
任何帮助将非常感激.
解决方法
这个Metatag可以实现正确的CSS渲染,并且在CSS中 – 按设计 – 高度:100%
basically doesn’t work.
您需要为元素的每个祖先赋予特定高度,包括< body>,< table>,< tr>甚至< tbody>由解析器自动插入的元素.
无论如何,这种布局可以更简单的方式实现:
.topBanner { position:absolute; position:fixed; height:2em; top:0; left:0; width:100%; } body {padding-top: 2em}
这将在IE6中很好地降级,与溢出不同,它将在Mobile Safari中正常工作.