7

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

任何帮助将非常感激。

4

5 回答 5

5

这个元标记支持正确的 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}

这将在 IE6 中很好地降级，并且与 不同overflow的是，它将在 Mobile Safari 中正常工作。

于 2009-12-20T23:52:41.570 回答
1

编辑：

删除 DOCTYPE 声明将使 height="100%" 工作，但它会将浏览器置于怪异模式，这是不可取的。

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

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

HTML

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

CSS： ​</p> 

#search {
    background-color: red;
    position: fixed;
    height: 150px;
    width: 100%;
}
#results{
    background-color: orange;
    position: fixed;
    top: 150px;
    width: 100%;
    bottom: 0;
    overflow: auto;
}
​
于 2010-01-03T19:36:40.480 回答
0

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

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

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

于 2009-10-07T18:19:23.073 回答
0

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

据我所见，您始终必须设置要溢出的容器的高度/宽度，因此您需要设置它们。

为了解决这个问题，我建议您在 onReady 事件中添加一个 jQuery 脚本，该脚本会动态地修复高度和宽度，从而使溢出工作。

于 2009-10-07T18:19:50.483 回答
0

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

于 2009-12-16T16:22:12.207 回答