html - CSS Bootstrap等高3行

我有一个适合100％高的垂直菜单。在此内部，我需要将行的高度等高以适合此容器。同样，具有按钮的作用似乎会使容器稍微低于页面。有没有办法在不将.button类定位为绝对的情况下解决此问题？

http://jsfiddle.net/tebrown/Bek9L/2943/

<div class="button"><button>Mobile Menu</button></div>
<div class="mobileContainer">
<div class="mobileInner">
    <div class="row nopadding">
        <div class="col-md-6 col-sm-6 col-xs-6 nopadding">
            <div class="box">1</div>
        </div>
        <div class="col-md-6 col-sm-6 col-xs-6 nopadding">
            <div class="box">2</div>
        </div>
        <div class="col-md-6 col-sm-6 col-xs-6 nopadding">
            <div class="box">3</div>
        </div>
        <div class="col-md-6 col-sm-6 col-xs-6 nopadding">
            <div class="box">4</div>
        </div>
        <div class="col-md-6 col-sm-6 col-xs-6 nopadding">
            <div class="box">5</div>
        </div>
        <div class="col-md-6 col-sm-6 col-xs-6 nopadding">
            <div class="box">6</div>
        </div>
    </div>
</div>
</div>

谢谢你的帮助！非常感激！

最佳答案

等高问题的一种解决方案是使用容器将单元格分成3行，并将每个单元格的高度设置为33％（如果需要，则设置为33.3％）。为了使其工作，行的父容器需要高度为100％。

关于被丢弃的容器：当浏览器计算元素的高度时，将得到以下结果：

TotalHeight = (Height of the .button div) + (Height of the .mobileContainer div)
TotalHeight = (around 50px) + (100% of the parent container) = MORE than 100%

因此，基本上，您得到的高度大于可用高度（100％），这就是浏览器显示滚动条的原因。有一些方法可以解决此问题，其中一种方法是为.button div设置固定高度，并按如下方式定义.mobileContainer的高度：

height: calc(100% - fixed height of the .button div)

使用该定义，您可以确保总高度始终为100％。

我已经修改了您的小提琴以显示两种解决方案。

http://jsfiddle.net/zrdoze15/1/