0

私は何日もこれに取り組んでおり、css、オーバーフロー、およびレイアウトに関する考えられるすべての記事を読んでいます。

バナー ( position: absolute ) のあるページがあり、その下には 2 つのブロック div を含む div があります。2 番目のブロック div には、テキストを含む別の div があります。

ウィンドウのサイズが変更されたときに、最も内側の DIV にスクロール バーを表示したいと思います。

含まれるすべての要素に高さが設定されていることを確認するための投稿を読みました。すべての適切な場所にoverflow-y: autoを設定しました。うまくいきません。

含まれる DIV は次のようになります: http://i.imgur.com/oDHM4.png

ブラウザウィンドウのサイズを変更したときに緑色の部分をスクロールしたい（y方向のみ）。

どのデザインでもスクロール可能な DIV は非常に便利ですが、それほど難しいことではありません。ありとあらゆる助けをいただければ幸いです。

ダニー

マークアップ

マークアップは非常に単純です。

<body>
    <div id="page-header" style='background:blue;'>page-header</div>
    <div id="page-content">
        <div id="configContent" style='height: inherit; background: steelblue;'>
            <h1 id='panTitle'>Panel Title</h1>
            <div id='panProbes' class='libPanel' style="background: maroon;">
                <p>panProbes</p>    
                <div id="probesCT1" class="configtable" style='background: red;'>
                    <p class='pTblTitle'>probesCT1</p>
                </div>
                <div id="probesCT2" class="configtable" style='background: grey;'>
                    <p>probesCT2</p>
                    <div id='pTbl' style='background: green;'>
                        <div class='pRow'>1st para in pTbl</div>
                        <div class='pRow'>some data</div>
                        <div class='pRow'>some data</div>
                        <div class='pRow'>some data</div>
                        <div class='pRow'>some data</div>
                        <div class='pRow'>some data</div>
                        <div class='pRow'>some data</div>
                        <div class='pRow'>some data</div>
                        <div class='pRow'>some more data</div>
                        <div class='pRow'>some more data</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>

**スタイリング**

コアの本質に切り詰められた CSS は次のとおりです。

html, body {    
    position:absolute;
    margin: 0px;
    padding: 0px;
    height: 100%;
    width: 1010px;
    overflow: hidden;
}

#page-header {
    position: absolute;
    left: 5px;
    top: 5px;
    height: 60px;
    width: 100%;
}

#page-content {
    width: 100%;
    height: 100%;
    margin-top: 95px;
}

#configContent {
    height: 100%;
    width: 300px;
    padding-left: 0px;
    border-width: 3px;
    margin-left: 30px;
    margin-right: auto;
}

.libPanel { height: 100%; }

#probesCT1 { width: 150px; margin: 0 auto 0 30px; }
#probesCT2 { 
    width: 200px;
    /* height: 100%; */
    margin: 0 30px 50px 30px;
    padding: 0 10px 10px 10px;
}

#pTbl { overflow-y: auto; }
.pRow { margin-bottom: 10px; }
4

1 に答える 1

0

overflow-y: autoスクロールバーを機能させて作成するにはdiv、特定の高さを設定する必要があります。したがって、この例では(上記の html を使用して) に設定しました200px。これは、スクロール バーなしでコンテンツを表示するのに必要なスペースよりも少ないため、スクロール バーが表示されます。ただし、1) 含まれる div の高さのコメントを解除する必要があり、2) その div のコンテンツが div の高さを埋めるのに必要な量よりも少ないため、スクロールバーが表示されないため、これに設定する100% と機能しません。 . さらにコンテンツを追加すると、スクロール バーが表示されます。

あなたが本当に望んでいるのは、必要に応じて常にスクロールバーがあることを保証することですが、それでも、divがページの下部より下に伸びていないことを確認する必要があります。そうしないと、スクロールバー自体に問題が発生する可能性がありますページから。おそらくあなたの意図に近いものを構成しましたが、効果を得るにはネストされたrelativeor要素を複数使用する必要があることに注意してください。absoluteまた、タイトルをクリアするために、要素の上部の高さの位置を推測する必要がありました。

于 2012-03-10T19:57:43.870 に答える