css - 调整子级 div 高度，使其与父级/兄弟级相同

Question

我遇到的问题绝对会引发我的强制症，需要解决。

我正在尝试将 .post_author/.post_content div 调整为与其父 div 相同的高度，在本例中为 .post

目前，如果帖子不够长，就会有一个很大的丑陋空间，正如我所说的，丑陋。

帖子足够长:

div结构:

<div class="post classic">
  <div class="post_author"></div>
  <div class="post_content">
    <div class="post_head></div>
    <div class="post_body></div>
  </div>
</div>

相关CSS:

    .post {
    overflow: hidden;
}

.post.classic {
    padding-top: 0;
    min-height: 380px;
}

.post .post_author {
    padding: 5px;
    overflow: hidden;
    color: #a1a1a1;
    font-family: 'Roboto', 'Open Sans', Helvetica, Arial, sans-serif;
    font-size: 13px;
    font-style: normal;
}

.post.classic .post_author {
    height: 100%;
    width: 15%;
    float: left;
    padding: 15px 2% 15px 3%;
    margin-top
    font-family: 'Roboto', 'Open Sans', Helvetica, Arial, sans-serif;
    font-size: 13px;
    font-style: normal;
    border-radius: 0;
    /*box-shadow: 1px 0 0 #000;*/
}

.post.classic .post_content {
    float: right;
    width: 78%;
}

.post_content {
    min-height: 321px;
    background-color: rgba(255,255,255,0.04);
    padding: 9px 10px 5px 0;
    box-shadow: inset 1px 0 0 #000;
}

我一生都不知道如何解决这个问题。我尝试过将显示设置为 table、flex、inline-block，并挖掘了许多其他类似的 stackoverflow 帖子，但到目前为止没有任何效果。

Answer 1

仅就这些信息而言，我只能给您有限的建议。我假设您无法将其复制到 jsFiddle 上的演示中，因为这两张图片看起来比您发布的内容要多得多的 HTML/CSS。现在我已经弄清楚了，我将集中精力让 2 个 div 以最大高度适合另一个 div。

CSS

html { box-sizing: border-box; }
*, *:before, *:after { box-sizing: inherit; margin: 0; padding: 0; }
.post_content, .post_author { min-height: 380px; height: 100vh; overflow: none; }

请参阅我对此的回答 post ，好像很相似。