したがって、基本的には、別の div に 2 つの div が必要であり、内側の div は使用可能なすべてのスペースを占有する必要があります。解決策を探しているときに、この問題に対する多くの解決策を見つけましたが、すべての解決策に共通して、内側の div の 1 つが固定サイズであったため、問題に適用できませんでした。これは私の問題には当てはまりません。
編集: div a と b の両方のコンテンツが動的に読み込まれることを指摘したいと思います。そのため、それらのいずれかに固定サイズを設定することはできません。
これを正確に取得しましょう: div "main" があります。この div には、div "a" と、別の div "b" が 'a' の下に含まれています。Div 'a' はより重要な div であるため、常にすべてのコンテンツを表示し、コンテンツを表示するために必要なだけのサイズを取る必要があります。コンテンツは変数なので、「a」を自動に設定します。ここまでは順調ですね。
今、bのサイズの設定に問題があります。残りの利用可能なスペースをすべて使用する必要があり、すべてのコンテンツを表示するのに十分でない場合は、スクロールバーを表示する必要があります。
これはプレーンなhtml/cssで可能ですか?
問題を大まかに示すリンクを次に示します-実際のコードをフィドラーにコピーすると、多くのexternライブラリが使用されるなどの困難な原因になります。テキストは明らかにメインdivの境界内に留まる必要があります。また、後で自動的に入力されるため、すべてのテキストは単なるプレースホルダーです。
ここにリンクがあります http://jsfiddle.net/WH64v/5/
コードはこちら
<body>
<div style="width:300px; height:300px; border-style: solid;">
<div style="border-style: solid; height: auto">
hello1 <br>
hello2
</div>
<div style="overflow: auto">
hello3 <br>
hello3 <br>
hello3 <br>
hello3 <br>
hello3 <br>
hello3 <br>
hello3 <br>
hello3 <br>
hello3 <br>
hello3 <br>
hello3 <br>
hello3 <br>
hello3 <br>
hello3 <br>
hello3 <br>
end
</div>
</div>
</body>