3

3 つの div を含む div を作成しようとしています。最初と最後の div は、その内容に基づいてサイズを調整する必要があります。10 行のテキストが含まれている場合は、オーバーフローやスクロールなしで表示できる十分な大きさにする必要があります。

中央の div は残りのスペースを使用し、コンテンツ全体を表示するのに十分なスペースがない場合はスクロールバーを使用する必要があります。

最初と 3 番目のブロックが固定され、3 番目のブロックが残りのサイズを使用するという部分的な解決策を得ました。最初と 3 番目のブロックのサイズをその内容に基づいて変更できるようにするためのジャンプの方法がわかりません。

これを行う方法に関するヒントは大歓迎です。

これは私がこれまでに持っているものです:

ここに画像の説明を入力

<html>

    .outerDiv{
        /* The contents of this don't really matter */
        position: absolute;
        height:400px;
        top:25px;
    }

    .innerA{
        position: absolute;
        top:0ex;
        height:3ex; /* How can I set this based on the contents of the div? */
    }

    .innerB{
        position: absolute;
        top: 4ex; /* This needs to be based on the size of innerA */
        bottom: 4ex; /* This needs to be based on the size of innerC */
        overflow-y: scroll;
    }

    .innerC{
        position: absolute;
        height:3ex; /* How can I set this based on the contents of the div? */
        bottom:0ex;
    }

    </style>


    <div class="outerDiv" style="width:100%; border:1px solid #888888;">

        <div class="innerA" style="width:70%; border:1px solid #000088;"></div>

        <div class="innerB" style="width:60%; border:1px solid #008800;">a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>vv</div>

        <div class="innerC" style="width: 50%;border:1px solid #001100;"></div>

    </div>


</html>

私の好みは、次を使用して問題を解決することです。

  1. CSS & HTML
  2. ピュア & 標準 JS
  3. JS と道場
  4. その他の方法
4

1 に答える 1

1

jquery を気にしない場合は、A および C div の高さを計算してから、outerDiv から差し引くことができます。

$(".innerB").each(function() {
   var outerDivHeight = $('.outerDiv').outerHeight();
   var innerAHeight = $('.innerA').outerHeight();
   var innerCHeight = $('.innerC').outerHeight();
   var innerBHeight = outerDivHeight - innerAHeight - innerCHeight;
   $(this).css("height", innerBHeight);
});

ここにフィドルがあります：http://jsfiddle.net/Sz6CL/

于 2013-06-27T22:38:09.403 に答える