1

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

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>

代码笔： http ://cdpn.io/ILisk

问题：

好吧，问题是这在 Chrome 和 Firefox 中工作得很好......但是它在IE 9 或更低版本中不起作用（不确定它是否在 IE 10 中起作用）。'wrapperRow wrapperExpand' div 的高度确实设置为 100% 的绝对高度，这是 'this-wont-expand-to-100-percent-in-IE' 的父级，也设置为 100% . 我不明白为什么这不起作用。有没有人有解决方案或解决方法来使内部子 div（'this-wont-expand-to-100-percent-in-IE'）匹配它的父级的高度？（“wrapperRow wrapperExpand”之一）

我开始认为这在 IE 中是不可能的……至少在不使用 java-script 的情况下是不可能的……不幸的是，我对此并不熟悉。有任何想法吗？

4

1 回答 1

1

Web 浏览器通常会尝试修复您的错误编码，但只有更智能的浏览器才会成功！

当您对某些元素使用table诸如table,table-row之类的显示类型时，它也应该table-cell用于内部元素。这就是你忘记的：

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

这是CodePen 演示。

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

于 2013-08-24T20:35:19.093 回答