divsをページに合わせてサイジングし、指定された高さのないオーバーフロースクロールを作成する

Question

私のページの要素のサイジングに苦労しています。

私はいくつかのセクションが内部にある列を持っています。列全体の最大幅は80vhに設定されています。その列の中には次のものがあります。

最初は#profilePicです。この高さ（および幅）はページ幅に応じて自動的にリサイズされます。 第2は#profileInfoセクションで、以下のサブセクションがあります。

第1サブセクション固定高さの#profileNameです。 第2サブ。 #profileInfoセクションに残りのスペースを埋めたい#profileAboutです。そのセクションの内容が収まらない（オーバーフローする）場合は、スクロール可能にします。 3番目のSub。固定高さの#profileEmailです。

私は（あるため、自動リサイズプロフィール画像の）#profileInfoの高さを知らないので、今、私はこのように#profileAboutの最大の高さのパラメータを設定することができません、overflow-y: auto;は適用することができない、など列全体の内容は、その列からちょうどオーバーフローします。

これをまとめると、私はちょうどその列を可能な限り短くしようとしていますが（それは「約」という内容がほとんどありませんが）、画面の最下部に届くようにしています80vhから来る）と残りのコンテンツをスクロール可能にする。ここで

<div id="profileLeftPanel" class="card col-md-3"> 
    <div class="row"> 

    <!-- Profile pic --> 
    <div id="profilePic"> 
     <img src="<?php echo $_SESSION["someUser"]["profile_pic"] ?>" alt="[profile_pic]"> 
    </div> 

    <div id="profileInfo"> 

     <!-- Name --> 
     <h4 id="profileName"><?php echo $_SESSION["someUser"]["name"] ?></h4> 

     <!-- About --> 
     <div id="profileAbout"> 
     <?php echo $_SESSION["someUser"]["about"] ?> 
     </div> 

     <!-- Email address --> 
     <div id="profileEmail"><?php echo $_SESSION["someUser"]["email"] ?></div> 
    </div> 

    </div> 
</div> 

は、それがどのように見えるかの例であり、私が解決したい場合はどのようなもの：https://jsfiddle.net/mjnoach/zo32ra4f/

Answer 1

一つの迅速かつ汚い提案：

#profileAbout { 
    ... 
    height: 100%; 
    max-height: calc(500px - 150px - 40px - 40px); 
    /* Subtract the heights of the other elements on the page. */ 
    ... 
} 

あなたの追加情報を、フレックスボックスレイアウトを使用した別の解決方法があります。

<style> 
    .row { 
     background-color: white; 
     width: 200px; 
     height: 500px; 
     display: flex; 
     flex-direction: column; 
    } 
    #profilePic { 
     flex: 0 0 auto; 
    } 
    #profilePic img { 
     max-width: 100%; 
    } 
    #profileInfo { 
     flex: 1 1 auto; 
     display: flex; 
     flex-direction: column; 
    } 
    #profileName { 
     background-color: blueviolet; 
     margin: 0; 
     flex: 0 0 40px; 
    } 
    #profileAbout { 
     background-color: yellow; 
     overflow-y: auto; 
     flex: 0 1 auto; 
    } 
    #profileEmail { 
     background-color: blue; 
     flex: 0 0 40px; 
    } 
</style> 

<div class="row"> 
    <div id="profilePic"> 
     <img src="http://via.placeholder.com/350x150"> 
    </div> 
    <div id="profileInfo"> 
     <h4 id="profileName"></h4> 
     <div id="profileAbout"> 
      Lorem, ipsum dolor sit amet consectetur adipisicing elit. Minus, nesciunt? 
     </div> 
     <div id="profileEmail"></div> 
    </div> 
</div> 

が動作をテストするには、

• 変更は