0

現在、レイアウトをクロスブラウザーで動作させるのに問題があります。添付の画像では、プレビューを見ることができます。

height: 100%;

いくつかの情報:

  • div #ヘッダー
    • 幅: 100%
    • 高さ: 可変
  • div #サイドバー (overflow-y)
    • 幅: 300px
    • 高さ: 100% マイナス ヘッダー + フッターの高さ
  • div #frameHeader
    • 幅: 100% マイナス サイドバーの幅 (300px)
    • 高さ: 100% マイナス ヘッダー + フッターの高さ
  • iframe #iframe (オーバーフロー-y)
    • 幅: 100% マイナス サイドバーの幅 (300px)
    • 高さ: 100% マイナス ヘッダー + フッター + フレームヘッダーの高さ
  • div #Sticky Footer (もちろん一番下に固定)
    • 幅: 100%
    • 高さ: 可変

私はこれを機能させるために数え切れないほどの時間を費やしてきましたが、誰かが以前にこの問題に直面するべきだったと思いますか? 誰かがクロスブラウザの例を教えてくれることを願っています!

現在のコード: http://jsfiddle.net/s6wVw/ (醜いcssですが、要点はわかると思います;))

添付ファイル（プレビュー）は以下にあります

プレビュー画像

4

1 に答える 1

2

あなたの質問では、虚偽の声明を出し続け、自分自身と矛盾しています（たとえば、スティッキーフッターについて話しているが、ページがスクロールしないことも暗示しています-すべての要素の高さが100％になるため）。それでも、私はあなたを助けようとします。

上記の理由から、以下の仮定を立てました。

  1. メイン領域 (ヘッダー、フッター、サイドバー、フレーム ヘッダー、フレーム ボディ) のサイズの合計が常に 100% になるようにしたい
  2. ブラウザをスクロールさせたくない
  3. コンテンツがはみ出す場合にサイドバーやフレーム本体をスクロールさせたい

300pxブラウザ/ウィンドウのサイズが <=幅である場合、フレームなどが表示されないため、上記は不適切なサイト デザインにつながりbrowser/window height <= foot height + head heightます。 、sidebar、frame headまたはframe body。

jQueryそうは言っても、ここに 、html、およびを使用した例がありcssます。

CSS

html, body{
    margin:0; padding:0; border:0;
    color:#fff;
}
#head{
    width:100%;
    background:#aaa;
}
#body{
    width:100%;
}
    #sidebar{
        display:inline-block;
        width:300px; height:100%;
        background:#111;
        vertical-align:top;
        overflow:scroll;
    }
    #frame{
        display:inline-block;
        vertical-align:top;
        height:100%;
    }
        #fhead{
            width:100%;
            background:#333;
        }
        #fbody{
            width:100%;
            background:#777;
            overflow:scroll;
        }
#foot{
    position:fixed;
    top:100%;
    width:100%;
    background:#aaa;
}
h1{margin:0; padding:10px;}

jQuery

function setSizes(){
        var docWidth = $(window).width();
        var docHeight = $(window).height();
        var headHeight = $('#head').height();
        var footHeight = $('#foot').height();
        var bodyHeight = docHeight - headHeight - footHeight;
        var fHeadHeight = $('#fhead').height();

        $('#body').css({
            height: bodyHeight
        })
        $('#sidebar').css({
            height: bodyHeight
        })
        $('#frame').css({
            width: docWidth - 300
        })
        $('#fbody').css({
            height: bodyHeight - fHeadHeight
        })

        $('#foot').css({
            "margin-top": -footHeight
        })
    }
$(function(){
    setSizes();

    var doit;
    $(window).resize(function(){
        setSizes();
        setSizes();
    })
})

HTML

<div id="head"><h1>Head Section</h1><br><br><br><br></div>
<div id="body">
    <div id="sidebar"><h1>Side Bar</h1>
    </div><div id="frame">
        <div id="fhead"><h1>Frame Head</h1><br><br></div>
        <div id="fbody"><h1>Frame Body</h1></div>
    </div>
</div>
<div id="foot">
    <h1>Foot Section</h1><br>
</div>

ノート

  1. 次の div 内に好きなコンテンツを入れることができます: #head, #sidebar, #fhead, #fbody,#foot
  2. は、ウィンドウのサイズ変更時jQueryに関数を 2 回実行します。setSizes();これは、使用可能な幅/高さに影響を与える可能性のあるスクロールバーを考慮するためです
  3. overflowに配置するコンテンツに応じて、他の要素に追加のルールを設定する必要がある場合があります。divs
于 2013-07-15T19:07:11.120 に答える