css - calc() が CSS3 で正しく動作しない

Question

高さ 100% - 130px の 1 つの div を作成しようとしています。

コードは次のとおりです。

height: calc(100% - 130px); // Here 80px of TOC-header and 50 of TOC-footer
height: -moz-calc(100% - 130px);
height: -webkit-calc(100% - 130px);

ブラウザコンソール（Inspect Element）で編集するとうまくいきます。しかし、コードに同じものを適用すると、 calc(-30%); と表示されます。そのため、内容が見えなくなります。

下にfirebugのスクリーンショットを添付しました。本当に困惑する瞬間。

どんな助けでも大歓迎です。ありがとう。

ここに画像の説明を入力

score 0 · Accepted Answer

とheight: 100%は、両親の身長と同じ高さを指します。

あなたの場合、認識できないがあり.element1ますheight。100%この要素に実際の高さを設定すると、期待される出力が表示されます。

例えば：

.element1 {
    height :200px;
}

score 0 · Accepted Answer

アイテムを別の div でラップし、高さを 100% にして、上部または下部に 130px のパディング、または下部と上部に 65px のパディングを設定します。このようにして、要素を垂直に配置することもできます。

2 に答える 2