logo标签列表

在Internet Explorer 8中，DIV标签的高度100％无法正常工作。

cssinternet-explorerheight
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>

但是当我添加以下代码将meta标签设置为使用IE8格式时：
<meta http-equiv='X-UA-Compatible' content='IE=edge' />
底部的DIV标签超出了页面范围。我尝试了许多选项，但没有找到一种方法可以不指定值的高度来解决这个问题。我希望页面无论浏览器窗口大小如何都占据100％的屏幕空间。 希望能得到任何帮助。
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不同，它在移动Safari中能够正常工作。

1

编辑：

移除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;
}
​
2
移除文档类型声明可能会将您的页面推入怪异模式，这很可能会引起比解决更多的问题。 - Joel
@JoelPotter - 我同意，你是对的，我已经更新了答案。 - Eran Medan
这个CSS在跨浏览器兼容性方面也存在问题（虽然可能没有去掉DOCTYPE那么糟糕），因为IE6不能正确处理position: fixed。 - user577537
0
我曾经遇到和你类似的问题，最终解决方案是修改一个CSS行条目，该行条目有一个!important修饰符用于固定高度声明。在HTML代码中，该类（在CSS中定义）被分配为height为100％，但CSS在样式加载期间应用了!important。
0

为了达到你想要的效果，你应该将所有父元素的边距和填充都设为零。

更新：抱歉，一开始没有理解问题。我认为Ben的提示应该更好。:)

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

0

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

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

为了处理分辨率，我建议您在onReady事件中添加一个jQuery脚本，动态修复高度和宽度，使溢出工作。

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接