IE10 中的高度 100% 问题。在 IE 和所有其他浏览器中以 Quirks 模式工作答案

【问题标题】：Height 100% issue in IE10. Works in Quirks mode in IE and all other browersIE10 中的高度 100% 问题。在 IE 和所有其他浏览器中以 Quirks 模式工作
【发布时间】：2013-05-16 17:23:43
【问题描述】：

请看以下页面：

http://www.judsondesigns.com/Demos/jscroller/index.html

如果您在 IE 中注意到，它会导致滚动。其他所有浏览器都可以。为什么IE会导致滚动？我该如何解决这个问题？

谢谢

贾德森

这是我正在使用的代码：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<style>
html, body{ 

    height:100%; 
    width: 100%;
    margin: 0px;
    padding: 0px;

 }

</style>
</head>

<body>
<div style="display:table; width: 100%; height:100%;">
<div style="display: table-row; background: red">test</div>
<div style="display: table-row">
        <div style="display: table-cell; height:100%; width:100%;overflow: hidden ">
            <div style=" height:100%; width:100%; overflow:hidden; background: #06F">test123
            </div>
        </div>
</div>
<div style="display:table-row; background: red;">test</div></div>
</div>
</body>
</html>

和正常IE10模式下的图片：

在 Quirks 模式下（我需要它的外观）

【问题讨论】：

Something in my web site or project doesn't work. Can I just paste a link to it?...
我添加了更多细节。很抱歉！

标签： javascript html css

【解决方案1】：

您应该在包含test123 文本的div 上设置一个负数margin-bottom，其值高于底部table-row 的高度。您可以将其设置为 -100% 以确保安全，这将在 IE 中修复它，并且不会在任何其他浏览器中破坏它。

这是一个jsFiddle

【讨论】：

这是我得到的最接近的。谢谢。但是，当我尝试添加如下所示的绝对定位 div 时，底部在 IE 中被截断。关于如何避免这种情况的任何想法？你应该在整个盒子周围看到一个“假”的白色边框。 judsondesigns.com/Demos/jscroller/index.html
我认为this 是 IE 的根本问题，我认为没有解决方法（提到的未经测试的修复方法不起作用）。您可以删除<!DOCTYPE> 或add a line above it as mentioned here 以强制IE 进入怪癖模式。或者您可以更改为不使用表格布局，但我猜您想要表格布局，因为中间的div 意味着当其他任何div 的高度发生变化时按比例缩小，而我没有认为没有表格布局也可以。

【解决方案2】：

<div style="width: 100%; height: 100%; display: table; max-height: 100%;">
<div style="background: red; height: 2%; display: table-row;">test</div>
<div style="display: table-row;">
        <div style="width: 100%; height: 96%; overflow: hidden; display: table-cell; max-height: 100%; background-color: blue;">
            <div style="width: 100%; height: inherit; color: green; display: table;">test123456
 asdfasdfasdf           </div>
        </div>
</div>
<div style="background: red; height: 2%; display: table-row;">test</div></div>

这对我有用

【讨论】：

那么我怎样才能让它在标准 ie10 模式下工作呢？ 96.2 不起作用，因为当我调整它的大小时，它不是真正的 96.2 和建议？
这不是问题的解决方案，重点是我需要您从高度移开的那个 div 才能扩展 100% 的表格单元格。那么有什么想法吗？
所以，我试过你这样的代码，但是 96% 的问题是，如果页眉或页脚根据其中的内容展开，则 96% 变得无效。还有其他想法吗？除了 IE10 之外，所有其他浏览器都完美地处理了这个问题是没有意义的。共同点是什么？或者更好的是，其他浏览器在做什么而不是 IE？
它对我有用 - 所以我不知道该说什么它不仅仅是 IE 10，当你将 div 显示为表格时，它都是 IE 基本上使用表格我敢肯定 IE 即使是新版本也没有'没有更新他们显示表格的方式，因为人们只真正使用表格来显示表格/电子表格数据 - 不知道你为什么使用显示表格 - 这会更容易使用常规 div 显示为块元素而不是表格元素
你可以使用 position:fixed 作为顶部和底部的 div 并在中间使用 dow