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 のデモです。

ところで、この場合、(CSS テーブル レイアウトを使用する代わりに) Ryan Fait の Sticky フッターを使用することをお勧めします。CSS-Tricksにもスニペットがあります。

于 2013-08-24T20:35:19.093 に答える