Question

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

但是当我通过添加：

将元标记设置为使用IE8格式时

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

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

非常感谢任何帮助。

Answer 1

这个元标记可以实现正确的CSS渲染，而在CSS中 - 按设计 - height: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中很好地降级，与overflow不同，它可以在Mobile Safari中正常运行。

Answer 2

修改：

删除DOCTYPE声明会使height =“100％”工作，但它会使浏览器处于怪癖模式，这是不可取的。

一般来说，不鼓励使用表格进行布局，你应该使用CSS代替。

例如：http://jsfiddle.net/rf649/7/

<强> HTML

<div id="search">Search Area</div>
<div id="results">Results Area</div>

<强> CSS：

#search {
    background-color: red;
    position: fixed;
    height: 150px;
    width: 100%;
}
#results{
    background-color: orange;
    position: fixed;
    top: 150px;
    width: 100%;
    bottom: 0;
    overflow: auto;
}

Answer 3

您应该将父元素的所有边距和填充设置为零，以便获得所需的内容。

更新：抱歉，立即不明白这个问题。 Ben的暗示应该是我假设的更好的暗示。：）

更新2：糟糕，因为Ben删除了他的回答，我的第一次更新没有任何意义。尝试将身体的高度设置为100％，这应该可以解决问题。

Answer 4

我对跨浏览器CSS的理解并不是那么大，所以它可能不是最好的解决方案，但它是一个解决方案。

据我所知，你总是需要设置要溢出的容器的高度/宽度，所以你需要设置它们。

为了处理解决方案，我建议你在onReady事件中添加一个jQuery脚本，动态修复高度和宽度，使溢出工作。

Answer 5

我遇到了和你类似的问题，最后解决方法是修改一个CSS行条目，该条目有一个!important修饰符用于固定高度声明。在HTML代码中，类（在CSS中定义）将height分配给100%，但CSS在样式加载期间应用了!important。

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

5 个答案: