1

固定の高さの div にも含まれている場合、スクロール バーの下部が表示されたまま 100% の高さまで div を拡張しようとしています。誰かが私を助けてくれませんか:)

以下のレイアウトを使用すると、.div2 の下部にある垂直スクロール バーが視点の高さから外れます。これは、.div1 の高さが 200px であり、div1 が高さ 100% + 200px になるためだと推測しています。

.div1 を固定の高さにし、.div2 を拡張して残りのウィンドウの高さを埋め、その高さに達するとオーバーフローする方法はありますか。

ここにCSSがあります

html, body {
        height: 100%;
    }
    body {
        margin: 0;
        padding: 0;
        overflow:hidden;
    } 
    .container
    {
        height:100%;
    }
    .leftContent { 
        left:0; 
        top:0; 
        padding:0; 
        width:250px; 
        height:100%; 
        color:white;
        background:blue;
        overflow:hidden;
        border:blue solid;
    } 
    .div1
    {
        height:200px;
        background-color:black;
        border: red solid;
    }
    .div2
    {
        overflow:scroll;
        height:100%;
        border:yellow solid;
    }

そして、これがHTMLです。

<div id="container" class="container">
    <!-- Start Left Column-->
    <div id="leftColumn" class="leftContent">
        <div id="div1" class="div1">
            CONTENT 
        </div>
        <div id="div2" class="div2">
            START START START START START START START START START START START START START START START START 
            CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT
            CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT
            CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT
            CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT
            CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT
            CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT
            CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT
            CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT
            CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT
            CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT
            END END END END END END END END END END END END END END END END END END END END END END END END 
        </div>
    </div> 
    <!-- End Left Column-->
</div>

とても有難い。ありがとう

4

2 に答える 2

4

.div2 でこの設定を試してください

.div2 {
    overflow:scroll;
    position: absolute;
    top: 200px;
    left: 0;
    bottom: 0;
    width: 250px;
    border:yellow solid;
}

このようにして、絶対配置で.div2真下.div1に配置し、必要に応じて幅と高さを拡張します（コンテナの幅と高さまで）

編集

.div2IE のバグは、別の div にラップすることで修正できます-><div><div class="div2"></div></div>

また、このcssを.leftContent宣言に追加してみてください

.leftContent {
    /* other declarations */
    position: relative;
    overflow: hidden;
}
于 2010-02-08T13:56:36.140 に答える
0

次の css を更新します

.leftContent { 
    left:0; 
    top:0; 
    padding:0; 
    width:250px; 
    height:100%; 
    color:white;
    background:blue;
    overflow:hidden;
    border:blue solid;
    position:relative;
} 
.div1
{
    height:200px;
    background-color:black;
    border: red solid;
    border-width:2px;
}
.div2
{
    border-width:2px;
    position:absolute;
    top:204px;
    bottom:2px;
    overflow-y:scroll;
    right:0px;
    border:yellow solid;
}

左のコンテンツを相対化して、配置された要素になり、2 つの div を含むブロックになりました。これは、div2が残りのスペースを埋めるために重要です。

border-widthを明示的に設定して、div1 の境界線と重ならないようにdiv2を配置する場所がわかるようにします。

基本的に絶対配置を使用して、div2を取得し、位置を明示的に指定してleftContentの残りのスペースを埋めました。私が使用した場合overflow、スクロールしないスクロールバーが下部に表示されるので、それを取り除くために使用しoverflow-yました。

于 2011-12-01T15:52:14.737 に答える