0

ブラウザのサイズが小さすぎる場合、3 つの水平固定位置の静的幅 div 要素をスクロール可能にしようとしています。現在、ブラウザーのサイズがこれら 3 つの div の合計幅よりも小さく縮小されている場合、水平方向にも垂直方向にもスクロールしません。

左右のペインは決して移動しないことに注意してください。垂直方向にスクロールする場合は、中央のペインのみをスクロールする必要があります。

画像の例:

ここに画像の説明を入力

左ペイン、中央ペイン、右ペインの CSS は次のとおりです。

#webcto_menu {
    position: fixed;
    top: 0px;
    left: 0px;
    width: 150px;
    background-image:url(../images/webcto_120.png);
    background-repeat: no-repeat;
    background-position: top left;
    padding-top: 67px;
}
#page_contents {
    position: absolute;
    top: 0px;
    left: 160px;
    width: 450px;
}
#webcto_pane {
    position: fixed;
    top: 40px;
    left: 615px;
    width: 510px;
    height: 100%;
    border: 1px solid #A6C9E2;
    overflow: auto;
    background-color: #ffffff;
    background-image:url('../images/sp_bg_lrg.jpg');
    background-repeat: no-repeat;
    background-position: center center;
}

これらの div の周りにコンテナーもあります。

#page_container {
    min-width:1100px;
}

ここに私のHTML DIVがあります：

<div id="page_container">
    <div id="webcto_menu"></div>
    <div id="page_contents"></div>
    <div id="webcto_pane"></div>
    <div id="webcto_pane_menu"></div>
</div>

スクロールを有効にして現在のデザインを維持するのを手伝ってくれる人はいますか? オーバーフローを追加してみました: スクロール; page_container に移動しますが、固定要素が移動しない間、中央のペインを左右にスクロールするだけです（固定要素が機能する正しい方法だと思います）

4

1 に答える 1

0

固定位置の div を使用している理由がわかりません。しかし、最も簡単な解決策は、各 div の内容を iframe に入れることです。そうすれば、スタイルシートで定義された幅/高さに関係なく、フレームのコンテンツの寸法を確実に継承できます。定義されたスタイルは引き続き尊重されますが、オーバーフローのデフォルトは auto です。

HTML:

<div id="container">
  <iframe id="one" src="http://www.ltg.ed.ac.uk/~richard/unicode-sample.html"></iframe>
  <iframe id="two" src="http://www.ltg.ed.ac.uk/~richard/unicode-sample.html"></iframe>
  <iframe id="three"src="http://www.ltg.ed.ac.uk/~richard/unicode-sample.html"></iframe>
</div>

CSS

#container{
    width: 1000px;
    margin: 0 auto;
    }
        #one{
        width: 328px;
        height: 1000px;
        float: left;
        }
        #two{
        width: 328px;
        height: 1000px;
        float: left;    
        }
        #three{
        width: 328px;
        height: 1000px;
        float: left;    
        }

インラインに収まるように各フレームをフロートさせるには、スクロール バーに必要な 5px (ブラウザーによって異なります) を考慮する必要があります。1000/3 = 333 - 5 = 328

于 2012-11-09T18:18:24.460 に答える