Question

我有一个适合100％高度的垂直菜单。在这个内部我需要将行拉伸到相同的高度以适应这个容器。此外，按钮似乎略微下降容器下面的容器。有没有办法解决这个问题而不将.button类定位为绝对类？

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

感谢您的帮助！非常感谢！

Answer 1

同等高度问题的一个解决方案是使用容器将单元格分成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/

Answer 2

您可以使用jquery设置高度，并将父<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">放到每个col-md-6以保留订单

$(document).ready(function(){

    _height = $(window).height();    
    _innerheight = _height/3
    $(".respheight").height(_innerheight);
    $(".box").height(_innerheight);
    /*the border radius has 1px because is the difference between in the lines*/
});

检查 jsfiddle

CSS Bootstrap Equal Height 3行

2 个答案: