html - 一列静态宽度，而另一列是动态宽度

Question

<div class="table">
    <div class="sidebar"></div>
    <div class="content"></div>
</div>

* {
    margin:0; padding:0;
}
html, body {
    width:100%;
    height:100%;
}
.table { 
    display:table;
    width:100%;
    height:100%;
}
.sidebar {
    width:200px;
    height:100%;
    background:red;
    display:table-cell;
    white-space:nowrap;
    vertical-align: top;
}
.content {
    width:100%;
    height:100%;
    background:orange;
    display:table-cell;
    vertical-align: top;
}

我到底错过了什么？ :)，试图复制这个结构: http://dev.brigademarketing.com/brigade/old-content/site1/

fiddle : http://jsfiddle.net/8o50f0cf/

Answer 1

删除 width:100%来自动态列，因此它可以自动计算其宽度。

Updated Fiddle

A display: table-cell元素就像一个 <td> ，这意味着如果没有width，它将占用其父表的剩余空间是定义。