使 div 高度动态化，这样就不会与额外内容产生差距

Question

我试图让这个 div 在左列添加了额外内容时始终拉伸它的高度以触及底部。在图像中你看到了这个。哪些 CSS 或 JS 技巧可以解决这个问题？

HTML:

<div class="content-sections" style="">
  <div class="grid-container columns">
    <div class="left-section grid-55 mobile-100">
     <div class="title">
       <!-- DYNAMIC TEXT -->
     </div>
     <div class="content">
       <!-- DYNAMIC TEXT -->
     </div>
   </div>
   <div class="top-section grid-45 mobile-100">
     <div class="top-title">
       <!-- DYNAMIC TEXT -->
     </div>
     <div class="content-item">
       <!-- DYNAMIC TEXT -->
     </div>
   </div>
   <div class="bottom-section grid-45 mobile-100"> // THIS SECTION NEEDS HEIGHT TO ALWAYS STRETCH TO FOOTER
     <div class="cta">
       <!-- DYNAMIC TEXT -->
     </div>
     <div class="button">
     </div>
   </div>
 </div>

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);
}

Answer 1

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

使 div 高度动态化，这样就不会与额外内容产生差距

Making a div height dynamic so there is not a gap with extra content

javascript

jquery

css

height