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

Question

I made a simple two-column fluid layout using Bootstrap 2 . One column contains two div , and the other contains three div . Both columns are of span6 . The fiddle is here .

I attempted to adjust the heights of the two div s in the left column using CSS, so that the top one occupies 62.5% of the browser window height, while the bottom one occupies the rest 37.5%. And similarly for the three div s in the right column. But there are a few questions/problems:

1. The heights of the blocks/ div s do not fill up the window vertically, and the height of each block/ div is not changed.
2. How to make the total height of the two div s on the left equal to that of the three div s on the right, while respecting the relative height ratio within each column ( left: 62.5%, 37.5%; right: 35%, 30%, 35% )
3. How to adjust the paddings between blocks/ div s?

I hope all of these can be achieved without any Javascript.

Answer 1

I've tried something, I hope that helps you. So, answers are:

1. Height of each BlocX div is not changed because you didn't set height of body . In tour case, body have auto height, given by elements inside of body .

2. Look below.

3. Those "paddings" are actually margins in class .well . So, avoid that class or override settings.

Finally, we have code like this:

HTML:

Removed class .well , everything else is the same.

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

We give to html and body elements height:100%; and after that do the same to .container-fluid , .row-fluid and .span6 . Now we have result like this in DEMO .

NOTE: In resolutions smaller than 768px, use media queries to set height of BlockX and all other elements. Also, don't set height directly on span6 , row-fluid etc. This is just example. In live site, use some classes to override classes in bootstrap.