0

我使用Bootstrap 2. 一列包含两个div，另一列包含三个div。两列都是span6。小提琴就在这里。

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

  1. blocks/ divs 的高度不会垂直填满窗口，每个 block/ 的高度div不会改变。
  2. 如何让div左边两个s的总高度等于div右边三个s的总高度，同时尊重每列内的相对高度比（left: 62.5%, 37.5%; right: 35%, 30%, 35%）
  3. 如何调整块/div秒之间的填充？

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

4

1 回答 1

0

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

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

  2. 往下看。

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

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

HTML：

删除了 class .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%;做同样的事情。现在我们在DEMO中得到了这样的结果。.container-fluid.row-fluid.span6

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

于 2012-08-15T01:19:36.680 回答