0

画面の解像度に関係なく、ヘッダーとフッターが常に上部と下部に表示されるようにします。つまり、本体のみにスクロールバーを含める必要があります。

これは私のjsfiddleです：

http://jsfiddle.net/sfctB/7/

<!DOCTYPE html>
<html>
    <head></head>
    <body>
        <div style="height:60px;background:#000;color:#fff;">This is header</div>
        <div style="height:100%;background:red;" id="red">...
</div>
        <div style="height:60px;background:#000;position:fixed;bottom:0px;width:100%;color:#fff;">This is footer</div>
    </body>
</html>

画面の解像度に関係なく、赤いセクションだけがスクロールバーを占有するようにします。したがって、Ipad または IPhone でも動作するはずです。赤い部分を 100% にしようとしましたが、スクロールバーのもう一方の端が表示されません。したがって、フッターと本文が重なっているように見えます。誰でも私を助けてもらえますか？

4

3 に答える 3

4

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
}
于 2013-01-25T11:54:07.933 に答える
0

キーは位置属性です。これを試して：

<!DOCTYPE html>
<html>
    <head></head>
    <body>
        <div style="height:60px;background:#000;color:#fff; position: absolute; top: 0px;">This is header</div>
        <div style="height:100%;background:red;" id="red">...
</div>
        <div style="height:60px;background:#000;position:absolute;bottom:0px;width:100%;color:#fff;">This is footer</div>
    </body>
</html>
于 2013-01-25T11:47:48.550 に答える
0

問題は、コンテンツがフッターにオーバーラップしても問題ない場合に簡単に実行できることを達成しようとしている方法だと思います.

ヘッダーとフッターで使用position:fixed;すると、ヘッダーとフッターを固定したいという希望を実現できます。次に、通常どおりコンテンツをスクロールするだけです。

ヘッダーとフッターをオフセットして、その下のコンテンツを表示するには、本文の上部と下部にマージンを追加するだけです。この場合は次のとおりです。

body { margin: 60px 0; }

これは、モバイル デバイスでも機能します。

開発者には、スクリプトやトリックでデフォルトの動作を模倣しようとするのではなく、ブラウザーが既に行っていることを利用することを常にお勧めします。

この方法で開発すると、開発時間が長くなり、クロス ブラウザーで常に機能するとは限りません。これを行うと、ブラウザが特定の機能/スクリプトの方法のサポートを停止した場合に、サイトの寿命に問題が生じることもあります.

私はあなたのフィドルを更新して、私が何を意味するのかを示しました: http://jsfiddle.net/rnF9p/1/

于 2013-01-25T11:59:03.770 に答える