How do I match the height of both column in a two

问题:

I'm currently stuck on an design issue that has had me scratching my head for a bit too long.

I have a two-column layout with one column for content (left) and a side bar that lists some sports venues (right) and this column's content exceeds that of the content column.

Basically what I'm looking to achieve is to make the content column match the left hand column.

Much like the one I quickly did up over on Codepen http://codepen.io/anon/pen/iLJAe Any advice on how to do this would be greatly appreciated.

Thanking you in advance

Stu :)

Here what I have in my style.css for the two columns.

style.css

.content {
    border: 1px solid #e8e8e8;
    float: left;
    margin: 5em 0 0;
    padding: 1em;
    height: 100%;
}

.sidebar {
    border: 1px solid #e8e8e8;
    float: left;
    margin: 5em -0.1em 0;
    padding: 1em;
    height: 100%;
}

回答1:

You can use css display: table; property.

First put the two divs in a wrapper (act as a parent div for both)

Like:

<div id="#wrapper">
    <div class="content"></div>
    <div class="sidebar"></div>
</div>

Then in your css, use display: table to the wrapper div and display:table-cell; to the column divs (this will make the both divs behave like <td> in a table) to get them to same height.

Like:

.wrapper{
    height: 100%;
    width: 100%;
    display: table;
    float:left;
}

.content {
    border: 1px solid #e8e8e8;
    margin: 5em 0 0;
    padding: 1em;
    height: 100%;
    background: red; /* for test */
    display: table-cell;
}

.sidebar {
    border: 1px solid #e8e8e8;
    margin: 5em -0.1em 0;
    padding: 1em;
    height: 100%;
    background: blue; /* for test */
    display: table-cell;
}

WORKING SAMPLE