Javascript 使div高度动态化，这样就不会与额外的内容产生间隙

我试图让这个div在左列添加了额外内容时，始终拉伸它的高度以接触底部。在图像中，您可以看到这一点。什么样的CSS或JS技巧可以解决这个问题

HTML:

---

在最后一个div中尝试以下样式

<div class="bottom-section grid-45 mobile-100" style="display:table;height:100%;"> // THIS SECTION NEEDS HEIGHT TO ALWAYS STRETCH TO FOOTER
 <div class="cta">
   <!-- DYNAMIC TEXT -->
 </div>
 <div class="button">
 </div>

---

给了我们HTML但没有CSS？不错，我们可以做很多。我们可以看看CSS吗？@Ruddy我喜欢你这样的评论。没有帮助。我会提供CSS，但我主要是问是否有人遇到过这个问题，并找到了解决这个问题的窍门。是的，设置高度：100%为父元素，如果有必要，设置“granpa”元素应该可以。一个关于如何工作的例子。@tjoenz你应该事先考虑一下，没有CSS很难看到你对其他元素做了什么。可能有一百个原因导致这个问题。胡乱猜测是没有帮助的，你应该在我们需要帮助你的所有信息上帮助我们。

div.content-sections {
    width: 100%;
    margin: 0;
    padding: 0;
}

div.content-sections div.columns {
    max-width: 4000px;
    padding: 0;
    margin: 0;
    padding-left: 7.65%;
}

div.content-sections div.columns .left-section {
    padding-left: 20px;
    padding-right: 0;
    box-sizing: border-box;
    padding-top: 67px;
    padding-bottom: 156px;
    padding-right: 8.375%;
}

div.content-sections div.columns .left-section .title {
    font-size: 24px;
    font-family: $mediumFont;
    color: rgb(35, 47, 50);
    line-height: 1.042;
}

div.content-sections div.columns .left-section .bodytext {
    font-size: 16px;
    font-family: $regularFont;
    color: rgb(35, 47, 50);
    line-height: 1.5625;
    margin-top: 1.5em;
    margin-bottom: 1.5em;
}

div.content-sections div.columns .top-section {
    color: white;
    background-color: #fb8c20;
    padding-top: 67px;
    padding-bottom: 156px;
    padding-left: 5%;
    padding-right: 16.125%;
    box-sizing: border-box;
}

div.content-sections div.columns .top-section .top-title {
    margin-bottom: 18px;
    font-size: 32px;
    font-family: $lightFont;
    color: rgb(255, 255, 255);
    line-height: 1.042;
}

div.content-sections div.columns .top-section .content-item {
    background-image: url(/images/check-mark.png);
    background-repeat: no-repeat;
    background-position: 0 5px;
    padding-left: 1.875em;
    margin-bottom: 1.5em;
    font-size: 16px;
    font-family: $mediumFont;
    line-height: 1.5625;
    color: rgb(255, 255, 255);
}

div.content-sections div.columns .bottom-section {
    color: white;
    background-color: #232f32;
    padding-top: 56px;
    padding-bottom: 28px;
    padding-left: 5%;
    padding-right: 20%;
    box-sizing: border-box;
}

div.content-sections div.columns .bottom-section .cta {
    margin-bottom: 0.5em;
    font-size: 55px;
    font-family: $lightFont;
    color: rgb(255, 255, 255);
}

<div class="bottom-section grid-45 mobile-100" style="display:table;height:100%;"> // THIS SECTION NEEDS HEIGHT TO ALWAYS STRETCH TO FOOTER
 <div class="cta">
   <!-- DYNAMIC TEXT -->
 </div>
 <div class="button">
 </div>