13

最大の高さを持つ親要素と、この親要素を満たす子要素が必要です。子のコンテンツが親を超えている場合、スクロールバーが表示されます。私はこのようにそれを解決しようとしました:

div.parent {
  max-height: 50px;
  width: 100px;
  border: 1px solid black;
}

div.child {
  height: 100%;
  overflow-y: auto;
}
<div class="parent">
  <div class="child">
    <div class="some-content">
      abcde<br>abcde<br>abcde<br>abcde<br>abcde<br> abcde
      <br>abcde<br>abcde<br>abcde<br>abcde<br> abcde
      <br>abcde<br>abcde<br>abcde<br>abcde<br> abcde
      <br>abcde<br>abcde<br>abcde<br>abcde<br> abcde
      <br>abcde<br>abcde<br>abcde<br>abcde<br>
    </div>
  </div>
</div>

残念ながら、これは期待どおりに機能しません。子供は親の上に成長します。

スクロールしてはならない他のアイテムを保持している可能性があるため、親に overflow-y: auto を設定することはオプションではないことに注意してください。子は、親に残されたスペースを埋める疑いがあります。詳細については、ライブ DEMO を参照してください。

ライブデモ

4

3 に答える 3

5

私の知る限り、CSS でこれを行う簡単な方法はありません。基本的に、ブラウザーに残りのスペースをスクロール可能な要素で埋めるように求めています。これは JavaScript で行うことができます (私は怠け者なので、この例では jQuery を使用しています)。

$('.parent').each(function(){
    $(this).children('.child').height($(this).height() - $(this).children('.sibling').height()+"px");
});

http://jsfiddle.net/BUxUe/13/

于 2013-09-30T12:03:51.007 に答える
1

Flexbox の使用を試すことができます。

div.parent {
    max-height: 300px;
    width: 200px;
    border: 1px solid black;
    display: flex;
    flex-direction: column;
}
div.sibling {
    border: 1px solid red;
    flex: 0 0 auto;
}
div.child {
    overflow-y: auto;
    border: 1px solid blue;
    flex: 0 1 auto;
}

これが一種のハックかどうかはわかりません。しかし、それはこの問題を解決するようです。

于 2015-10-01T11:29:31.347 に答える
-2

これをチェックしてくださいフィドル

div.parent {
    max-height: 50px;
    width: 100px;

    border: 1px solid black;
    overflow:scroll;
}

div.child {
    height: 100%; 
}
于 2013-09-30T12:10:52.833 に答える