Question

我使用Bootstrap 2制作了一个简单的双柱流体布局。一列包含两个div，另一列包含三个div。两列均为span6。小提琴是here。

我尝试使用CSS调整左列中两个div的高度，以便顶部占据浏览器窗口高度的62.5％，而底部占据其余37.5％。对于右栏中的三个div，同样如此。但是有一些问题/问题：

块/ div的高度不会垂直填满窗口，并且每个块/ div的高度不会更改。
如何使左侧的两个div的总高度等于右侧的三个div的总高度，同时尊重每列中的相对高度比（{{1 }}）
如何调整块/ left: 62.5%, 37.5%; right: 35%, 30%, 35% s之间的填充？

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

Answer 1

我尝试了一些东西，希望对你有所帮助。所以答案是：

由于未设置body的高度，因此不会更改每个BlocX div的高度。在旅游案例中，正文具有自动高度，由body内的元素给出。
请看下面。
这些“填充”实际上是类.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 2中将div的列与流体布局对齐

1 个答案: