将子div高度调整为与parent / sibling相同

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上的演示中，因为2张图片看起来比您发布的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的回答，它似乎相似。

Answer 2

尝试将后期内容的最小高度设置为视口的100％

min-height: 100vh

希望这有帮助。