Css 如何匹配两列布局中两列的高度？

我现在被困在一个设计问题上，这让我挠头太久了

我有一个两栏布局，其中一栏内容（左）和一个侧栏，其中列出了一些运动场馆（右），该栏的内容超过了内容栏的内容

基本上，我希望实现的是使内容列与左侧列匹配

很像我很快在Codepen上做的那个 任何关于如何做到这一点的建议都将不胜感激

先谢谢你

斯图：）

下面是我在style.css中为这两列提供的内容

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

---

您可以使用css

display:table属性

首先将这两个div放在包装器中（充当这两个div的父div）

比如：

首先，您必须定义宽度，其次，对于100%高度，您还必须将其所有父项定义为100%高度（包括主体和html标记）。谢谢你，弗赖特！这正是我想要的：D我确实有一个简单的问题，就是利用
display:table
和
display:table cell
是老式的还是当前的方法？为了跨浏览器功能，我要求更多。是的，它被广泛用于这种方式或那种布局情况。除非你担心像5.5或IE 6这样的老家伙。为此干杯。只是想确定一下。我对老IE用户不感兴趣。
<div id="#wrapper">
    <div class="content"></div>
    <div class="sidebar"></div>
</div>

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