最小高さとスクロールディグ

Question

これが可能かどうかはわかりませんが、私は尋ねると思っていました。

私はdivコンテナの中に2つの列であるdivレイアウトを持っています。これらは、インラインブロックとパーセンテージ幅を使用して並べられています。

基本的なレイアウトはように

<div id="containter" style="width:100%"> 

<div id="leftDiv" style="width:20%; height:100%; display:inline-block; overflow-y:scroll"> 
    List of Content 
</div> 

<div id="rightDiv" style="width:80%; height:100%; display:inline-block; min-height:500px; vertical-align:top"> 
    Some expanding information 
</div> 

</div> 

わかりましたので、この基本的なレイアウトは素晴らしい作品。私が抱えている問題は、あなたが気づいたかもしれないが、私は左の列にオーバーフロー、右の列には分の高さがあることです。アイデアは左の列に項目のリストが表示されますが、そのリストに含まれるdivの高さを伸ばしたいとは思わないので、divとscrollの100％に収まるようにします。

ただし、右手divのコンテンツは、コンテナdivの高さを伸ばすことができるようにしたいと思っていますが、いつも最低の高さは500px、左手divはそれに合わせて伸びます。

当分は私はjavascriptの修正を書いていますが、これが純粋なCSSでこれを行うことが可能かどうか調べたいと思います。たぶん、CSS3/HTML5に新しい何かが役立つでしょうか？

あなたの助けを借りてくれてありがとう。

Answer 1

display:table;は実際には行いません。質問された質問は、ドキュメントの長さを増やすのではなく、左の列をスクロールすることを望んでいます。この問題の図は、this fiddleを参照してください。

overflow: scrollを強制的に動作させることを認識している唯一の方法は、高さを定義することです。 max-height:500px;はlike soで動作しますが、100%はガベージ結果を取得せずに設定することはできません。

レイアウトとスクロールの両方を取得するように見えますが、jsソリューションが必要です。