如何设置div的底边距等于其高度（高度会变化）？

Question

我遇到的问题可能与我尝试的问题有不同且更简单的解决方案，因此我将进行详细说明，以便人们可以提供其他答案。

我在类似于Shopify的平台上构建了一个响应式主题，在该主题中，客户将使用小部件区域并用自己的内容填充它们。 在页脚中，我有3个div，左边为25％宽度，中间为50％宽度，右边为25％。 我暂时不使用“浮动”一词，因为我希望中心div（50％）的宽度达到100％，并在分辨率<= 992px（Bootstraps col-sm断点）时占据最高位置。

这段代码演示了我正在尝试做的事情。 纯CSS可能无法实现，因此随时提供您可以想到的任何解决方案。

的HTML

<div class="center-div">
   /* user content of varying height */
</div>
<div class="left-div">
   /* user content */
</div>
<div class="right-div">
   /* user content */
</div>

和CSS

.center-div {
  width: 50%;
  margin: 0 auto;
  margin-bottom: /* negative and equal to the height of the user's content */
}

.left-div {
  width: 25%;
  float: left;
}

.right-div {
  width: 25%;
  float: right;
}

@media (max-width: 992px) {
.center-div { width: 100%; margin: 0px; }
.left-div { width: 50%; }
.right-div { width: 50%; }
}

*编辑*

没关系的人。 我使这完全困难。 发布此内容大约一分钟后，我意识到我可以将它们全部包装在一个相对的div中，并给左和右divs绝对定位，直到断点为止。
好奇的小提琴然而，如果您愿意，请随时回答问题，因为我想知道是否有可能。

Answer 1

首先将Divs Float左右浮动，然后再放置内容。

如果左右浮动div之间有空格，则Content将填充它。 （L：25 / C：50 / R：25）否则，内容将中断。 （L：50 / R：50 // C：100）

<div class="left-div">
    /* user content */
</div>
<div class="right-div">
    /* user content */
</div>
<div class="center-div">
    /* user content of varying height */<br>
    /* user content of varying height */<br>
    /* user content of varying height */<br>
    /* user content of varying height */<br>
    /* user content of varying height */<br>
</div>

CSS：

.left-div {
    background-color: #a99;
    float: left;
    width: 25%;
}

.right-div {
    background-color: #9a9;
    float: right;
    width: 25%;
}

.center-div {
    background-color: #99a;
}

@media (max-width: 992px) {
    .center-div { width: 100%; }
    .left-div, .right-div { width: 50%; }
}

在所有情况下，所有div具有相同的高度：

$('.left-div, .right-div').height(function(){
    return $('.center-div').height();
});

小提琴