固定宽度侧边栏，100% 宽度表格的流体内容区域答案

【问题标题】：Fixed Width Sidebar, Fluid Content area with 100% width table固定宽度侧边栏，100% 宽度表格的流体内容区域
【发布时间】：2016-05-13 08:34:35
【问题描述】：

我有这个小提琴：http://jsfiddle.net/gpxeF/1793/

使用以下 CSS：

.sidebar{ 
    width: 200px;
    float: left;
    background: yellow;
}
.content {
    background: green;
}
table {
    width: 100%;
    background:#ccc;
}

问题在于表格，由于已将其设置为 100%，它实际上位于侧边栏下方。如果我删除 width: 100% 规则，它可以正常工作，但我需要表格用完父 div 容器的所有空间。我怎样才能做到这一点？

【问题讨论】：

该表是.content的子表还是兄弟表？

标签： html css responsive-design

【解决方案1】：

一个更常见且我认为更好的解决方案是使用与侧边栏大小相同的边距来阻止内容在侧边栏下流动：

#fixedWidth{ 
    width: 200px;
    float: left;
    background: blue;
}
#theRest{
    background: green;
    margin-left: 200px;
}

jsfiddle

【讨论】：

这为我解决了下面的内容 - 谢谢

【解决方案2】：

我不是 CSS 专家，但我认为您也需要为内容 div 添加宽度和左浮动。你需要类似的东西

.content {
    background: green;
    width: 400px;
    float: left;
}

JSFiddle http://jsfiddle.net/rhzky40e/

【讨论】：

【解决方案3】：

我认为这可能有效

HTML

<div class="sidebar">Fixed<br />Sidebar<br />Goes<br />Here</div>
<div class="content">
    <table>
        <tr><td>test If a !DOCTYPE is not specified, the border-collapse property can produce unexpected results in IE8 and earlier versions.</td></tr>
    </table>
</div>

CSS

.sidebar{ 
    width: 200px;
    float: left;
    background: yellow;
}
.content {
    background: green;
    float: left;
     width: calc(100% - 200px);
}    
table {

    background:#ccc;
}

链接：jsfiddle

【讨论】：

【解决方案4】：

今天（2015 年底）您可以改为执行此操作（也适用于 IE8/9）。

.table {
    display: table;
    width: 100%;
}
.cell {
    display: table-cell;
}
.sidebar{ 
    width: 200px;
    background: yellow;
}
.content {
    background: lightgreen;
}

<div class="table">
    <div class="cell sidebar">
      Fixed<br />Sidebar<br />Goes<br />Here
    </div>
    <div class="cell content">
      Test
    </div>
</div>

或者对于最新的浏览器使用 flex。

.flex {
    display: flex;
    width: 100%;
}
.sidebar{ 
    width: 200px;
    background: yellow;
}
.content {
    flex: 1;
    background: lightgreen;
}

<div class="flex">
    <div class="sidebar">Fixed<br />Sidebar<br />Goes<br />Here
    </div>
    <div class="content">
        test
    </div>
</div>

【讨论】：