Question

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

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

首先是#profilePic，根据页面宽度自动调整高度（和宽度）。其次是#profileInfo部分，其中包含以下小节：

First Sub。是#profileName，高度固定。第二分。是#profileAbout，我希望填充#profileInfo部分中的剩余空格。如果该部分的内容不适合（并且溢出），我希望它可以滚动。第三个子。是#profileEmail，高度固定。

现在，由于我不知道#profileInfo的高度（由于自动调整大小的个人资料图片），我无法设置#profileAbout的max-height参数，因此， 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

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

1 个答案: