调整 div 大小以适应页面并计算没有指定高度的溢出滚动

Question

我正在努力调整页面上的元素大小。

我有一个专栏，里面有几个部分。整列的最大宽度设置为 80vh。该列内有：

首先是#profilePic，它的高度（和宽度）会根据页面宽度自动调整大小。 其次是#profileInfo 部分，它有以下子部分：

第一个子。是#profileName，高度固定。 第二个子。是#profileAbout，我想填满#profileInfo 部分的剩余空间。如果该部分的内容不适合（并且溢出），我希望它可以滚动。 第三个子。是#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. */
  ...
}

根据您的附加信息，这是另一种解决方案，使用 flexbox 布局。

<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>

要测试行为，您可以

• 改变.row的高度
• 更改#profilePic中的占位符图片