Question

我有点困境。我可以解决这个问题，但这样做会很痛苦，并且仍然会限制网站布局如何工作。基本上我一直在使用以下方法给自己一个粘性页脚，实际上是高度变量：

http://pixelsvsbytes.com/blog/2011/09/sticky-css-footers-the-flexible-way/

示例：

CSS：

html, body {height:100%; width:100%; margin:0;}
.wrapper {display:table; width:100%;}
html>body .wrapper {height:100%;}
.wrapperRow {display:table-row;}
.wrapperRow.wrapperExpand {height:100%;}
.this-wont-expand-to-100-percent-in-IE {height:100%;}

HTML：

<body>
<div class="wrapper">

<div class="wrapperRow">This is the header</div>

<div class="wrapperRow wrapperExpand">
<div class="this-wont-expand-to-100-percent-in-IE">
This is the content
</div>
</div>

<div class="wrapperRow">This is the footer</div>

</div>
</body>

CodePen：http://cdpn.io/ILisk

问题：

嗯，问题是这在Chrome和Firefox中运行得很好......但它不在 IE 9或更低版本中工作（不确定它是否在IE 10）。 'wrapperRow wrapperExpand'div确实将它的高度设置为100％的绝对高度，这是'this-wont-expand-to-100-in-in-IE'的父级，也设置为100％。我不明白为什么这不起作用。有没有人有一个解决方案或解决方法，使内部子div（'这不会 - 扩展到100％在IE'中）与其父级的高度匹配？（'wrapperRow wrapperExpand'one）

我开始认为它在IE中是不可能的...至少在没有使用java脚本的情况下也许......不幸的是我真的不熟悉它。有什么想法吗？

Answer 1

Web浏览器经常尝试修复您的错误编码，但只有更聪明的编辑才会成功！

对某些元素使用table显示类型，例如table，table-row时，它也应该使用table-cell作为内部元素。这就是你忘了的：

.this-will-expand-to-100-percent-in-IE {
  display: table-cell;
  height:100%;
}

以下是 CodePen Demo 。

顺便说一下，在这种情况下，我更喜欢使用Ryan Fait's Sticky footer（而不是使用CSS表格布局）。您还可以在CSS-Tricks上找到一个代码段。

为什么100％的高度在显示屏内工作：Chrome和＆amp ;; FF但不在IE9中？

1 个答案: