高度100%不适用于Internet Explorer 8中的DIV标记

Question

高度100%不适用于Internet Explorer 8中的DIV标记

我有以下代码用于显示带有滚动结果部分的搜索工具.在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>

Run Code Online (Sandbox Code Playgroud)

但是当我通过添加以下内容将元标记设置为使用IE8格式时:

<meta http-equiv='X-UA-Compatible' content='IE=edge' />

Run Code Online (Sandbox Code Playgroud)

底部DIV标记扩展到页面之外.我已经尝试了很多选项但是没有实际指定值的高度就无法找到解决方法.这不起作用,因为我希望页面占据屏幕的100%,无论浏览器窗口的大小.

任何帮助将非常感激.

Answer 1

Kor*_*nel 5

这个metatag可以实现正确的CSS渲染,而在CSS中 - 通过设计 - height:100% 基本上不起作用.

你需要给特定的高度,每一个元素,包括单祖先<body>,<table>,<tr>甚至<tbody>是会自动由分析器插入的元素.

无论如何,这种布局可以更简单的方式实现:

.topBanner {
    position:absolute; position:fixed; 
    height:2em; 
    top:0; left:0; width:100%;
}
body {padding-top: 2em}

Run Code Online (Sandbox Code Playgroud)

这将在IE6中很好地降级,而且不同overflow,它将在Mobile Safari中正常工作.

Answer 2

arn*_*rno 0

您应该将父元素的所有边距和填充设置为零以获得您想要的效果。

更新：抱歉，没有立即理解问题。我认为本的提示应该是更好的提示。:)

更新 2：哎呀，由于 Ben 删除了他的答案，所以我的第一次更新没有任何意义。尝试将主体高度设置为 100%，应该可以解决问题。

归档时间：	15 年，11 月前
查看次数：	22244 次
最近记录：	13 年，2 月前