爲什麼100％的高度在Chrome＆FF中的顯示器中工作：表格行，但IE9中沒有？

我有點困惑。我可以解決這個問題，但這樣做會很痛苦，並且仍然限制網站佈局的工作原理。基本上，我一直在使用下面的方法給自己一個棘手的頁腳，實際上是高度可變：爲什麼100％的高度在Chrome＆FF中的顯示器中工作：表格行，但IE9中沒有？

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％的絕對高度，這是「這種不會擴展到100％在IE中」的父級，並且也設置爲100％。我不明白爲什麼這不起作用。有沒有人有一個解決方案或解決方案，使內部的孩子div（'這不可能擴大到百分之一在IE瀏覽器'）匹配它的父母的高度？（'wrapperRow wrapperExpand'之一）

我開始認爲這是不可能在IE中...至少不是沒有使用java腳本或許...不幸的是，我真的不那麼熟悉。有任何想法嗎？

來源

2013-08-24 TCD Factory

網頁瀏覽器經常試圖修復你的壞編碼，但只有更聰明的才能成功！

當您使用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找到一個片段。

來源

2013-08-24 20:35:19

是的，但後來它和父母一樣寬，不幸的是我不想。由於設計原因（主要是因爲我想要一個100％寬的菜單欄和頁腳），我希望「包裝器」是100％......我不希望內容區域爲100％，而是寬度爲978像素且居中。我知道我沒有提到這一點，因此我期望你知道這是不公平的，但仍然是我所處的情況。 –

也就Ryan's Fair的粘性頁腳而言，它在高度上並不可變這就是爲什麼我不能使用它。我需要它的高度可變，因爲它的Joomla模板和頁腳內容可以改變高度。 –

只是爲了澄清，你是什麼意思'''wrapperRow wrapperExpand'div確實已將其高度設置爲絕對高度100％'？它有一個「綠色」課嗎？之前的背景也是綠色的。還有一件事，你認爲「它和父母一樣寬」是什麼意思？寬或高？因爲目前每個部門都有100％的寬度。 –

爲什麼100％的高度在Chrome＆FF中的顯示器中工作：表格行，但IE9中沒有？

回答

相關問題