WordPress中WPBakery实现三列自适应等高的问题求助

问题说明 #

在WordPress中使用Minti主题的“Unicorn”版本搭配WPBakery Builder，想要实现三列等高布局：

• 尝试给.EQUALHEIGHT类下的子元素设置height:100%，但仅当给#MYROW设置固定高度时，子列才会等高；
• 移除固定高度后，子列高度不一致，需求是让#MYROW高度自适应子内容，同时子列保持等高。

现有代码结构 #

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

固定高度生效的CSS（不符合自适应需求） #

#MYROW {
  height: 400px;
}

解决方法 #

方案1：用Flexbox实现自适应等高（推荐） #

替换原有CSS，给.EQUALHEIGHT添加Flex布局属性，让父容器高度自适应，子列自动等高：

.EQUALHEIGHT {
  display: flex;
  flex-wrap: wrap; /* 保证移动端列自动换行，兼容响应式 */
}

.EQUALHEIGHT .wpb_column {
  flex: 1; /* 三列平分宽度，配合原有的vc_col-sm-4实现小屏响应式 */
  display: flex;
  flex-direction: column; /* 可选：让列内子元素可撑满高度 */
}

/* 可选：如果需要列内内容完全撑满高度，添加以下样式 */
.EQUALHEIGHT .vc_column-inner,
.EQUALHEIGHT .wpb_wrapper {
  height: 100%;
  display: flex;
  flex-direction: column;
}

• display: flex让.EQUALHEIGHT成为Flex容器，容器高度由最高子列决定，实现自适应；
• flex-wrap: wrap确保小屏幕下列不会挤压，自动换行；
• 若要让列内某个元素（比如底部按钮）固定在列底，可给该元素加margin-top: auto。

方案2：用WPBakery自带功能（更省心） #

很多时候WPBakery和主题自带等高选项，不用写CSS：

1. 编辑页面，找到#MYROW对应的WPBakery行模块；
2. 打开行的设置面板，查找Equal Height Columns（等高列）选项，勾选启用；
3. 检查Minti主题的自定义izer或行设置，是否有主题专属的等高开关，优先使用主题自带功能更稳定。

内容的提问来源于stack exchange，提问作者wepli23