1

したがって、基本的には、別の 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>
4

2 に答える 2

0

そのためにはテーブルスタイリングを使用する必要があります。

HTML

<div style="width:300px; height:300px; border-style: solid; display: table;">
    <div style="display: table-row">
        <div style="border-style: solid; box-sizing:border-box; width: 100%; display: table-cell;">
            hello1 <br />
            hello2
        </div>
    </div>
    <div style="display: table-row; height: 100%;">
        <div style="float: left; overflow: auto; display: table-cell; box-sizing:border-box; height: 100%; width: 100%;">
                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>
</div>

JSFiddle: http://jsfiddle.net/gBgfe/

于 2013-07-28T13:09:47.377 に答える
0

はい、可能です

解決策 1 スクロール バーを使用する [WITH FIXED HEIGHT]

.main{
  height:300px;/*whatever height you want for main... this height is eual to the summation of the heights of a and the portion of b you want to make visible at first */
  overflow:auto;/*it will bring scro bar if main requires */
}
.a{
   height:auto;
 }

スクロールバーなしのソリューション2（より良いアプローチ）:: [WITH OUT FIXED HEIGHT]

.main{
  height:auto;/*it will take the height as summation of both a and b automatically */
  overflow:hidden;/*very important */
}
.a{
   height:auto;
 }
.b{
   height:auto;
 }

ここにあなたのフィドルがあります:: FIDDLE [WITH OUT FIXED HEIGHT]

編集1 ::

これがあなたのコードです：NEW FIDDLE [WITH FIXED HEIGHT]

EDIT 2 ::あなたの条件は、メインの高さは固定されていますが、aの高さは可変であり、スクロールバーはbのみが必要な場合は、bの高さを固定する必要があるため、コードを次のように変更します

.main{
  overflow:hidden;   
  width:300px; border-style: solid;height:300px;
}
.a{
   height:auto;border-style: solid;
}

.b{
  overflow: auto;
  height:250px

}

これがあなたの3番目のフィドルです::スクロールBのみ

編集 3:の高さを何らかの形で修正して、b がスクロール バーを導入する制限を理解できるようにする必要がありますb。可変高さで b を作成することはできません。なぜなら、そのスクロール バーを導入するときに混乱するからです。の高さを指定する必要がありますb

于 2013-07-28T12:07:29.117 に答える