html - CSS div 表格样式

Question

我正在尝试使用 css 设计一个 div 表的样式。这是我的示例工作代码:

HTML:

<div class="container">
    <div class="row">
        <div class="table-row">
            <div class="mycolumn" id="sidebar">
                Sidebar area
            </div>
            <div class="mycolumn" id="content">
                <p>content area</p>
                <p>some more content</p>
            </div>
        </div>
    </div>
</div>

CSS

#sidebar{
    width: 250px;
    background-color: #eaeff1;
}
.table-row {
    display: table-row;
}
.mycolumn {
    display: table-cell;
    padding: 15px;
}
#content {
    background-color:#00eff0;
  /* width:100%; */
}
div {
    outline: 1px solid #3a87ad;
}

http://jsfiddle.net/gbovzuqm/

如何让内容区域 div 覆盖后面的所有剩余空间？我试过对其应用 width:100%，但它会挤压侧边栏区域。

如何使用 CSS 样式来实现？

Answer 1

不需要使用 display:table-row 使用这个

.table-row {
    display: table;
    width: 100%;
}

updated jsFiddle Code