html - 如何获得相等的内容和侧边栏(高度)？

Question

好的，我正在使用 bootstrap，我有主要内容，主要内容里面有左侧和右侧。左侧是它的内容，右侧是 8 个盒子。我尝试了所有方法，但无法获得左右两侧相等的值。

.main-content{
    float: left;
    width: 100%;
    position: relative;


}
.main-content .right-box.col-md-4{
    width: 37.5%;
    padding-left:0;
    padding-right:0;
    float:right;
    position:absolute;  
    top:0;
    bottom:0;
    right: 0;

}
.main-content .left-box.col-md-8{
    width:62.5%;
    padding-left:0;
    padding-right: 0;
    background-color: #fff;
    float: left;
    position: relative;

}

fiddle :https://jsfiddle.net/rvqg3fd7/右侧的最后一个 div 需要与左侧的 div 高度相同..我试过了，但没有成功。

Answer 1

高度是您不应在 Bootstrap 支持的网站中强加的元素，因为 Bootstrap 依赖于它的垂直灵 active 来响应较小的设备。毕竟，这是任何人使用 Bootstrap 的主要目的。然而，如果你坚持，那么你必须给每个元素一个明确的高度，并用填充来控制这个高度。

您没有提供我们可以使用的代码(甚至连 fiddle 都没有)所以我将发布我的演示，以便您可以看到实现此目的所需的引导类架构；

这是 HTML

<div class="container">
    <div class="row main-content">
        <div class="col-xs-12 col-sm-6 col-md-6">
            <div class="row">
                <div class="box left">

                </div>  
            </div>
        </div>
        <div class="col-xs-12 col-sm-6 col-md-6">
            <div class="row">
                <div class="box right">
                    <div class=" innerbox col-xs-12">
                        1
                    </div>
                    <div class=" innerbox col-xs-12">
                        2
                    </div>      
                    <div class=" innerbox col-xs-12">
                        3
                    </div>  
                    <div class=" innerbox col-xs-12">
                        4
                    </div>  
                    <div class=" innerbox col-xs-12">
                        5
                    </div>  
                    <div class=" innerbox col-xs-12">
                        6
                    </div>  
                    <div class=" innerbox col-xs-12">
                        7
                    </div>  
                    <div class=" innerbox col-xs-12">
                        8
                    </div>  
                </div>
            </div>  
        </div>
    </div>
</div>

和 CSS

.box.left{
    background:red;
    text-align:center;
    color: white;
    height:350px;
}
.box.right{
    background:blue;
    text-align:center;
    color: white;
    height:350px;
    padding:10px
}

.innerbox{
    background:lightgray;
    text-align:center;
    color: black;
    height:30px;
    margin-top:10px;
}

.main-content{
    float: left;
    width: 100%;
    position: relative;
}

以及指向 DEMO 的链接