為什么在Chrome和FF的display：table-row而不是IE9的display：table-row中可以100％的高度工作？

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-wontexpand-to-100％-in-IE”的父級，並且也設置為100％。 我不明白為什么這行不通。 有沒有人有解決方案或變通辦法以使內部子div（即“將這種情況擴展到IE中的100％”）與父級的高度匹配？ （“ wrapperRow wrapperExpand”之一）

我開始認為這在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演示 。

順便說一句，在這種情況下，我更喜歡使用Ryan Fait的Sticky頁腳（而不是使用CSS表布局）。 您還可以在CSS-Tricks上找到一個代碼段。

為什么在Chrome和FF的display：table-row而不是IE9的display：table-row中可以100％的高度工作？

問題描述

1 個解決方案

解決方案1
1 2013-08-24 20:35:19

為什么在Chrome和FF的display：table-row而不是IE9的display：table-row中可以100％的高度工作？

問題描述

1 個解決方案

解決方案1 1 2013-08-24 20:35:19

解決方案1
1 2013-08-24 20:35:19