jquery - 如何使 Bootstrap 列的高度相同，然后管理内部元素的高度？

Question

我在使用此布局时遇到了一些问题。我可以让其中一件事情奏效，只是不能同时做这件事。首先，让我向您展示我正在努力实现的目标:

描述

这是一个 3 列的 Boostrap 布局，具有可变高度的元素(或多或少像图像中以防万一它有帮助)和这些可变高度元素之一，中间底部的元素，包含 2 个宽度为 100% 的 div和 50% 的高度。

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

问题是我需要让所有 3 列的高度相同。在尝试了不同的解决方案之后，我可以实现这一目标。但是，当我尝试添加 2 个高度为 50% 的堆叠 div 时，我做不到。事实上，我可以使用 vh 来做到这一点，但我不想使用这种方法。我以为flex可能是解决方案，但也许由于我的限制，我无法做到，只是在中间列中有 3 个相同大小的元素，例如:橙色框、顶部链接、底部链接 50% 高度。这很重要，因为布局重叠了 50%，所以我似乎真的不喜欢这种方法(仍然认为解决方案必须与 flex 相关)

代码

这是我目前的代码。当然，我愿意更改标记和方法，因为我可能完全偏离了基础，但这是我目前所拥有的:

.topzone{align-items:stretch ; height:100%; overflow:hidden; }
.firstcol, .secondcol, .thirdcol{padding:0; }
.firstcol, .buttoneer{background:#06a url(images/blue_noise.png); color:#fff;}
.colbox{padding:30px}
.buttoneer{height:100%; }
.linkbut{width:100%; height:50%; padding:16px; display:inline-block; font-size:36px; line-height:36px; vertical-align:middle; background:rgba(0,0,0,0.5); margin:10px auto;}

<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="container mainbody">
    <div class="row topzone">
        <div class="col-xs-12 col-lg-4 firstcol">
            <div class="colbox">
                <img src="images/image1.png" alt="" />
            </div>
            <div class="girl">
                <img class="img-responsive" src="images/image2.jpg" alt="" />
            </div>
        </div>
        <div class="col-xs-12 col-lg-5 secondcol">
            <div class="girl">
                <img class="img-responsive" src="images/image3.jpg" alt="" />
            </div>
            <div class="colbox buttoneer">
                <div class="linkbut topbut"><a href="#">Top Link</a>

                </div>
                <div class="linkbut bottombut"><a href="#">Bottom Link</a>

                </div>
            </div>
        </div>
        <div class="col-xs-12 col-lg-3 thirdcol">
            <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. Curabitur in mi vestibulum, condimentum odio sed, sollicitudin leo. Pellentesque vehicula lectus sed ligula vulputate, at efficitur metus interdum. Suspendisse nec dui id ipsum commodo porttitor. Donec maximus, tellus ut pretium tristique, odio lorem efficitur tortor, a ornare felis augue eget augue. Sed ac orci scelerisque, feugiat ex at, pulvinar neque. Donec vehicula sodales volutpat.</p>
            </div>
        </div>
    </div>
</div>

最后的考虑:

请注意，我不关心小屏幕，高度为 50% 的按钮除外，因为它们无论如何都会使用 col-xs-12，所以此行为仅适用于中型和大型屏幕。此外，虽然我会感谢在此问题上提供的任何帮助，但我并不是在寻找完整的代码，至少不一定是这样。如果您发布完整的代码来解决问题，我也想知道它的工作原理和原因，以便我将来可以自己学习和做。

非常感谢任何答案，在此先感谢您

编辑:我可以看到使用 Stack Overflow 的代码片段它看起来与我的本地版本不一样，这可能是因为图像。

Answer 1

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

http://www.bootply.com/VASwIpqz8b

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

CSS:

html,body{height:100%;}

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