CSS：100% 高度不适用于带有主题的 WordPress 中的子项答案

【问题标题】：CSS: 100% height does not work for childs in WordPress with themeCSS：100% 高度不适用于带有主题的 WordPress 中的子项
【发布时间】：2023-01-15 07:47:47
【问题描述】：

我想在 WordPress 中创建三个高度相同的列。我正在使用带有 Minti 主题“独角兽”的 WPBakery Builder。因此我不能在这里发布整个代码。但也许你可以帮我解决我的问题。

我已经尝试了以下（简化，我希望，我确实粘贴了所有 DIV ...）：

<body>
  <div class="site-wrapper wrapall">
    <div id="page-wrap">
      <div id="content" class="page-section nopadding">
        <div class="wpb_row vc_row-fluid standard-section section section-no-parallax space stretch">
          <div class="col span_12 color-dark left">
            <div class="vc_col-sm-12 wpb_column column_container col no-padding color-dark">
            <div class="wpb_wrapper">
              <div id="MYROW" class="vc_row wpb_row vc_inner vc_row-fluid EQUALHEIGHT">
                <div id="MYCOLUMN1" class="wpb_column vc_column_container vc_col-sm-4">
                  <div class="vc_column-inner">
                    <div class="wpb_wrapper">
                      ...content...
                    </div>
                 </div>
               </div>
                <div id="MYCOLUMN2" class="wpb_column vc_column_container vc_col-sm-4">
                  <div class="vc_column-inner">
                    <div class="wpb_wrapper">
                      ...content...
                    </div>
                 </div>
               </div>
                <div id="MYCOLUMN3" class="wpb_column vc_column_container vc_col-sm-4">
                  <div class="vc_column-inner">
                    <div class="wpb_wrapper">
                      ...content...
                    </div>
                 </div>
               </div>
             </div>
           </div>
         </div>
       </div>
     </div>
   </div>
</body>

我的 CSS 看起来像这样：

.EQUALHEIGHT .wpb_column,
.EQUALHEIGHT .vc_column-inner,
.EQUALHEIGHT .wpb_wrapper {
  height: 100%;
}

但这只有效，如果我给#MYROW一个固定的高度，那么所有的子列都具有相同的高度。 100%是父母。

#MYROW {
  height: 400px;
}

如果我删除父母的这个固定身高，所有孩子都有不同的身高。

但我当然想要，父母的身高不是固定的，而是动态地适应其孩子的内容。

有谁知道，如何使用 WPBakery Builder 和 Minti Themes 在这个环境中改变它？或者有谁知道我可以如何或在哪里处理这个问题？

【问题讨论】：

标签： css wordpress themes

【解决方案1】：

我终于找到了解决方案：

.EQUALHEIGHT {
    display: flex;
    align-items: stretch;
    height: inherit;
}

.EQUALHEIGHT .vc_column_container,
.EQUALHEIGHT .vc_column-inner,
.EQUALHEIGHT .wpb_wrapper {
    display: flex;
    align-items: stretch;
    height: inherit;
}

成功了！

【讨论】：