1

これはjsfiddleリンクです：

http://jsfiddle.net/sfctB/20/

html,body
{
    height:100%;
    width:100%;
    overflow:hidden;
}

body
{
    padding: 60px 0px;
    height: 100%;
    box-sizing: border-box;
}

.header
{
    height:60px;
    background:#000;
    color:#fff; 
    width: 100%;
    position: fixed;
    top:0;
}
.body
{
    overflow-y: scroll;
    height: 100%;
}

.footer
{
    height:60px;background:#000;position:fixed;bottom:0px;width:100%;color:#fff;
    bottom:0
}

基本的に、スクロールバーはコンテンツ領域にのみ表示し、ヘッダーとフッターは常に表示する必要があります。上記のリンクは Chrome と IE では機能しますが、Firefox では機能しません。スクロールバーはフッターの後ろにあります。この問題を解決する方法を教えてください。

4

4 に答える 4

1

-moz- と -webkit- およびその他の必要なプレフィックスを本文に追加する必要があります。

body
{
padding: 60px 0px;
height: 100%;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
-o-box-sizing: border-box;   // if supported?
-ms-box-sizing: border-box;  // if supported?
}

http://jsfiddle.net/sfctB/53/

あなたができると思うなら、私はボックスサイズを廃止します.

于 2013-01-28T07:36:19.577 に答える
1

ボックスのサイズ変更を取り除きたい場合は、これも思いつきました

html, body {
    height:100%;
    width:100%;
    overflow:hidden;
}
body {
    padding: 60px 0px;
    height: 100%;
}
.header {
    height:60px;
    background:#000;
    color:#fff;
    width: 100%;
    position: fixed;
    top:0;
}
.body {
    overflow-y: scroll;
    position:fixed;
    bottom:0;
    top:60px;
    margin: 0 0 60px 0;
}
.footer {
    height:60px;
    background:#000;
    position:fixed;
    bottom:0px;
    width:100%;
    color:#fff;
}

chrome と ff と ie で動作します

http://jsfiddle.net/sfctB/67/

それが有効かどうかはわかりませんが、接頭辞が必要な何よりも信頼しています。

于 2013-01-28T07:56:04.123 に答える
0

このコード行を本体に追加してみてください

 -moz-box-sizing: border-box;

あなたの体はこのようになります

body
{
    padding: 60px 0px;
    height: 100%;
    box-sizing: border-box;
   -moz-box-sizing: border-box;

}

Firefoxで正常に動作しています... http://jsfiddle.net/vaibviad/5HRvq/

于 2013-01-28T07:54:10.220 に答える
-2

ボディクラスの高さが100％であるため、スクロールバーはフッターの後ろに配置されます。このリンクを参照してくださいjsfiddle.net/sfctB/23/

于 2013-01-28T07:06:18.620 に答える