1

問題は単純です：

http://jsfiddle.net/boblauer/wfLGG/

左の例では、すべてをスクロールしています。これは、スクロールdivの高さを100％に設定できるため、正常に機能します。右の例では、スクロールdivの高さがわからないため、機能しません。これは、そのスペースを別の要素と共有しているためです。100％に設定すると、コンテナからオーバーフローし、例に示されている2番目のスクロールバーが発生します。

javascriptを使用して.scroll-containerの高さを（container height-ヘッダーの高さ）に設定できることは知っていますが、この問題に対する純粋なcssソリューションはありますか？特にウィンドウのサイズが変更されたときに、スクロールするdivのサイズを再計算する必要があるため、これにjavascriptを使用する必要はありません。

編集：申し訳ありませんが、私はあまり明確ではありませんでした。私が欲しいのは、リスト自体がスクロール可能である間、ヘッダーが上部で静的なままであることです。

4

2 に答える 2

2

overflow: y-scroll;オンに設定する#ex2と、として動作し#ex1ます。

#ex1, #ex2 {
    float: left;
    height: 100%; 
    width: 45%;
    border: 1px solid black;   
    overflow: auto;   
}

#ex2 { overflow: y-scroll; }

デモ

于 2012-10-18T16:45:54.713 に答える
2

これは多分役立つと思います

.scroll-container {
    overflow: auto; 
    padding-top:20px;    
}

#ex2 span{
position:absolute;
    background:white;
}

jsFiddle

于 2012-10-18T18:24:06.877 に答える