html - 在 bootstrap 2 中将 div 的列与流体布局对齐

Question

我使用 Bootstrap 2 制作了一个简单的两列流体布局。一列包含两个 div，另一列包含三个 div。两列都是 span6。 fiddle 是 here .

我尝试使用 CSS 调整左侧栏中两个 div 的高度，使顶部的占浏览器窗口高度的 62.5%，而底部的占其余 37.5% %。右列中的三个 div 也是如此。但是有几个问题/问题:

1. blocks/div的高度不会垂直填满窗口，每个block/div的高度不会改变。
2. 如何使左边两个 div 的总高度等于右边三个 div 的总高度，同时尊重内部的相对高度比每列(左:62.5%、37.5%；右:35%、30%、35%)
3. 如何调整 block /div 之间的填充？

我希望所有这些都可以在没有任何 Javascript 的情况下实现。

Answer 1

我已经试过了，希望对你有帮助。所以，答案是:

1. 每个 BlocX div 的高度没有改变，因为您没有设置 body 的高度。在旅游案例中，主体具有自动高度，由 body 内的元素指定。

2. 往下看。

3. 那些“填充”实际上是 .well 类中的边距。因此，请避免使用该类或重写设置。

最后，我们有这样的代码:

HTML:

删除类 .well，其他一切都一样。

CSS:

html{height:100%;}

.body-background {
    padding-top: 10px;
    background-color: #D1D1D1;
    height:100%;
}
.container-fluid, .row-fluid, .span6
{
    height:100%;
}

#A-b {
    min-height: 62.5%;
    height: 62.5%;
    background-color: #FFE0C2;
}

#B-b {
    min-height: 37.5%;
    height: 37.5%;
    background-color: #4D4D4D;
}

#C-b {
    min-height: 35%;
    height: 35%;
    background-color: #969696;
}

#D-b {
    min-height: 30%;
    height: 30%;
    background-color: #57BCFF;
}

#E-b {
    min-height: 35%;
    height: 35%;
    background-color: #183547;
}

我们给 html 和 body 元素 height:100%; 然后对 .container-fluid 做同样的事情、.row-fluid 和 .span6。现在我们在 DEMO 中有这样的结果.

注意:在小于 768px 的分辨率下，使用媒体查询来设置 BlockX 和所有其他元素的高度。另外，不要直接在 span6、row-fluid 等上设置高度。这只是示例。在实时站点中，使用一些类来覆盖 Bootstrap 中的类。