css - 等高div

Question

我在一个使用 bootstrap 3 的网站上玩得很开心，该网站在主页上有三个 div，对于某些浏览器和浏览器窗口的大小 (*)，它们并没有完全排在底部(很烦人用户)。我尝试了各种解决方案，但没有发现任何解决问题的方法，而不会在其他地方造成破损。

因此，我想知道是否有人可以提供任何建议。这是一些代码:

 <div class="container-fluid light-grey-bg">
    <div class="row-fluid text-center">
        <div class="col-md-12">
            <p class="lead main-tagline">A blurb describing the awesome content of this site.</p>
        </div>

        <div class="clearfix"></div>

        <div class="row-eq-height">
            <div class="col-md-4">
                <div class="top-usp">
                    <a href="/first" class="btn btn-lg btn-info">First link</a>
                    <br/><br/>
                    <img src="/img/home/svg/first.svg"width="260px">
                    <p>The first thing described. This description is quite long and tends to wrap at a different place, thereby changing the size of this box in relation to the others.
                    </p>
                </div>
            </div>

            <div class="col-md-4" style="height: 100%;">
                <div class="top-usp">
                    <a href="/second" class="btn btn-lg btn-info">Second</a>
                    <br/><br/>
                    <img src="/img/home/svg/second.svg"> width="260px">
                    <p>A much shorter description for the second item.
                    </p>
                </div>
            </div>

            <div class="col-md-4" style="height: 100%;">
                <div class="top-usp">
                    <a href="/third" class="btn btn-lg btn-info">Third</a>
                    <br/><br/>
                    <img src="/img/home/svg/third.svg"> width="260px">
                    <p>The third item is much like the second.
                    </p>
                </div>
            </div>



            </div>
        </div>
    </div>

这是页面的一些 scss:

.home {
  height: 100%;

  .row-eq-height {
    height: 100%;
  }

  .top-usp {
    background-color: white;
    margin: 15px;
    padding: 20px;
    border-radius: 5px;
    min-height: 235px;
    height: 90%;

    -webkit-box-shadow: 2px 2px 0px 0px rgba(204, 204, 202, 1);
    -moz-box-shadow: 2px 2px 0px 0px rgba(204, 204, 202, 1);
    box-shadow: 2px 2px 0px 0px rgba(204, 204, 202, 1);

    }
}

如果有人有时间，我们将不胜感激任何关于具体尺寸问题的想法。

(*) 例如使用 Safari 的 iPad、MacBook Air。这在桌面版 Chrome 上看起来不错。

Answer 1

我尝试了多种选择；在盒子移动到小屏幕上的单列之前，flex 似乎是最好的，此时右边缘不对齐。最后，这或多或少起到了作用:

 /* from the "duplicate" ticket */
.row-eq-height {
    overflow: hidden;
 }

.row-eq-height > [class*="col-"]{
    margin-bottom: -99999px;
    padding-bottom: 99999px;
 }


 /* this seems to be the fix */
 .top-usp {
    ....
    min-height: 250px;
    ....
 }

高度变化是必要的，因为单独的负边距是不够的。