Jquery 如何使引导列具有相同的高度，然后管理内部元素的高度？

我对这个布局有一些问题。我可以让其中的一件事情起作用，只是不能两者同时进行。首先，让我向您展示我正在努力实现的目标：

说明

这是一个3列Boostrap布局，具有可变高度的元素（或多或少类似于图像中的元素，以防万一），其中一个可变高度元素（中底元素）可容纳2个100%宽度和50%高度的div

我尝试过的问题和解决方案

问题是我需要让所有3列的高度相同。在尝试了不同的解决方案后，我可以做到这一点。然而，当我试图添加这两个50%高度的叠层div时，我却做不到。事实上，我可以使用，但我不想使用这种方法。我认为可能是解决方案，但可能是因为我的局限性，我不能做到这一点，只是得到了3个元素的大小相同的中间列，如：橙色框，顶部链接，底部链接50%高度。这一点很重要，因为布局重叠了50%，所以我似乎真的不喜欢这种方法（仍然认为解决方案必须与flex相关）

代码

这是我到目前为止的代码。当然，我愿意改变标记和方法，因为我可能完全偏离了基准，但这就是我目前所做的：

.topzone{对齐项目：拉伸；高度：100%；溢出：隐藏；}
.firstcol、.secondcol、.thirdcol{padding:0；}
.firstcol、.buttoneer{背景：#06a url（images/blue_noise.png）；颜色：#fff；}
.colbox{padding:30px}
.buttoneer{高度：100%；}
.linkbut{宽度：100%；高度：50%；填充：16px；显示：内联块；字体大小：36px；线条高度：36px；垂直对齐：中间；背景：rgba（0,0,0,0.5）；边距：10px自动；}

我们的故事
Lorem ipsum dolor sit amet，是一位杰出的献身者。这是我的口头禅。非正义的法雷特拉。他是一位重要人物。南调味品尼布在智人finibus rutrum。我的前庭里的库拉比图尔，奥迪奥的调味品，利奥的独奏曲。这是一种有效的治疗方法。在同一个港口发生的意外事故。大耳朵评论管理人员有权保留或删除其管辖评论中的任意内容。塞德·阿克·奥奇的权杖，封建主义者，普尔文纳·内克。不要吃苏打水

这将是一个“不确定为什么它会这样工作，但它确实如此”的答案。也许有人能进一步说明。如果显式声明每个封闭div的高度，则可以将每个按钮的高度声明为50%，如下所示：

---

这接近你需要的吗

HTML:

在这里查看小提琴：

更新小提琴：

---

嗨，肖恩，谢谢你的回答。作为评论，我已经像你一样尝试了这个独立的解决方案，它工作得很好，但在整个场景中3列处于全高模式时都不起作用。这就是我的问题：我只能使其中一个场景工作，而不能使其中两个场景一起工作。您是否明确定义了每个封闭div的高度？似乎它也必须是内联css，为什么？我不知道！！让我试试，没有想到内联选项

<div class="container-fluid" style="height:100%">
  <div class="col-xs-4" style="height:50%;">
    <div class="col-xs-12" style="height:100%">
      <div class="row" style="height:100%">
      <div class="tophalf"></div>
      <div class="bottomhalf"></div>
    </div>
  </div>
</div>

html,body{height:100%;}

.tophalf{
height: 50%;
background: blue;
}
.bottomhalf{
height: 50%;
background: red;
}

<div class="row full-screen">
<div class="col-sm-4 firstcol col fix">
    <div class="col-sm-12 firstcol-first-element"></div>
    <div class="col-sm-12 firstcol-second-element"></div>
</div>
<div class="col-sm-5 secondcol col fix">
    <div class="col-sm-12 secondcol-first-element"></div>
    <div class="col-sm-12 secondcol-second-element fix">
        <a href="http://placekitten.com/g/200/300" target="_blank" class="col-sm-12 top-link">Top link to kitten</a>
        <a href="http://placekitten.com/g/200/300" target="_blank" class="col-sm-12 bottom-link">Bottom link to kitten</a>
    </div>
</div>
<div class="col-sm-3 thirdcol col fix">
    <div class="colbox">
         <h2>Our Story</h2>

        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce hendrerit dui id tellus dictum ornare. Praesent luctus non justo sed pharetra. Quisque posuere vehicula urna, ac dignissim erat suscipit quis. Nam condimentum nibh in sapien finibus rutrum.</p>
    </div>
</div>

.full-screen {
position: absolute;
top: 0px;
right: 0px;
bottom: 0px;
left: 0px;
margin: 0px;
}
a {
    text-align: center;
}
.col {
    height: 100%;
}
.fix{
    padding: 0px;
    margin: 0px;
}
.firstcol {
    background-color: green;
}
.secondcol {
    background-color: yellow;
}
.thirdcol {
    background-color: yellow;
}
.firstcol-first-element {
    height: 50%;
    background-color: blue;
}
.firstcol-second-element {
    height: 50%;
    background-color: green;
}
.secondcol-first-element {
    height: 60%;
    background-color: red;
}
.secondcol-second-element {
    height: 40%;
}
.top-link{
    height: 50%;
    background-color: grey;    
}.top-link:hover{  
    opacity: 0.7;
}
.bottom-link{
    height: 50%;
    background-color: brown;    
}.bottom-link:hover{  
    opacity: 0.7;
}
.colbox {
    padding: 30px;
}