div の高さを制限するプロジェクトの実装方法

Question

3 列のレイアウトがありますが、中央の列の高さに問題があります。 一般的に言えばチャットアプリケーションです。 クラス名は次のとおりです。 これら 3 つの列を含むコンテナの場合 (列の高さを同じにするために、次のようなグリッドを使用することにしました):

リーリー

左列と右列はそれほど重要ではありませんが、左列にはユーザーのリストが表示されることに注意してください。リストの長さは異なる場合があります(ユーザーはフィルタリングできます)。右側の列には (サイズの意味で) 静的なコンテンツがあります。

中列:

リーリー

この中央の列には 3 つの div があり、そのうちの 2 つ目は頭痛の種です

トップ div (高さは固定);

リーリー

下の div (高さも固定)

リーリー

最初にレンダリングされるとき、通常は左列のコンテンツが最も高く、一番下の div がそのコンテンツと視覚的に位置合わせされます。ユーザーをフィルタリングすると、中央の列の下部 div が右の列の下部セクションと視覚的に位置合わせされます。これはまったく正常なことです。 この問題は、チャット メッセージが中央の列の中央 div に表示されるときに発生します。これらのメッセージが少ない限り、これは問題ありませんが、すぐに中央の div が非常に大きくなり、はみ出してしまいます。そのため、中央の列が高くなり、下の div が低くなり、レイアウトが崩れてしまいます。中央の列の中央の div が特定の高さに達したときに独自のスクロールバーを取得し、その高さを超えないようにしたいのですが、これは非常に複雑に思えます。

さて、中間 div のスタイルは次のとおりです:

リーリー

しかし、これは機能しません。(スクロールバーがアクティブで、一部のコンテンツがスクロールバーの「後ろ」にあるにもかかわらず)、新しいメッセージがあるとコンテンツの高さが増加します。これは、列のコンテナーのピクセル高さが固定されていないことに関係があるのではないかと思います。しかし、それはできません。中央の列スタイルをフレックスまたはグリッドに設定しようとしましたが、すべて同じように機能します。 JS で解決できるかもしれませんが、厳密な CSS ソリューションを希望します。あなたはなにか考えはありますか？

Answer 1

サイズの大きな

要素に

overflow-y:scroll を設定しても無駄です。このプロパティ (overflow) は、高さが実際よりも低いことを前提としています。コードを修正するには、<div class="wrap">...<div>

: のように、 要素を次の属性でラップする必要があります。 リーリー ここで、

var(--top-div-height) と var(--bottom-div-height) は、上部と下部の 要素の高さです。