2

ヘッダー、メニュー、ラッパー、フッターを含む Web ページがあります。すべてのコンポーネントの高さをラッパーとは別に設定し、calc を使用してラッパーの最小高さを決定することで、フッターを固定しようとしています。ブラウザーは検査要素で calc 関数を取得しますが、ラッパーの高さを確認すると、100% ではなく常に 100% であり、545px であり、理由がわかりません。Firefox と Chrome で、さまざまなサイズのモニターでテストしましたが、満足のいくものではありませんでした。私が間違っていることはありますか？

#wrapper-fullwidth{
/* Firefox */
min-height: -moz-calc(100% - 545px);
/* WebKit */
min-height: -webkit-calc(100% - 545px);
/* Opera */
min-height: -o-calc(100% - 545px);
/* Standard */
min-height: calc(100% - 545px);
}

jsfiddle

あなたが提供できる助けを前もって感謝します。

4

2 に答える 2

1

このようなことを試してみる必要があると思います。

これが HTML (または同様のもの) の場合:

<div class="header">Header</div>
<div class="main">Main</div>
<div class="footer">Footer</div>

CSS は次のようにする必要があります。

html, body {
    height: 100%;
}
body {
    margin: 0;
}
.main {
    min-height: -moz-calc(100% - 90px);
    min-height: -webkit-calc(100% - 90px);
    min-height: -o-calc(100% - 90px);
    min-height: calc(100% - 90px);
    background-color: lightgray;
}
.header, .footer {
    height: 45px;
    background-color: yellow;
}

高さを設定する必要があります。そうしないhtmlと、高bodyさのパーセンテージ.mainが定義されません。

デモ: http://jsfiddle.net/audetwebdesign/2e3dK/

于 2013-10-25T12:27:48.363 に答える
-1

私の推測では、最後の px は文字列であり、int ではありません。

これを試して：

min-height: -moz-calc(100% - 545);

更新：それはおそらくうまくいかないので、min-heightではなくheightを使用してみてください

height: -moz-calc(100% - 545px);
于 2013-10-25T12:20:07.847 に答える