固定宽度边栏，100% 宽度的可变内容区域 table

Question

我有这个fiddle：http://jsfiddle.net/gpxeF/1793/

具有以下 CSS：

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

问题是 table，由于将其设置为 100%，它实际上低于侧边栏。如果我删除 width: 100% 规则它工作正常，但我需要 table 来用完父 div 容器的所有 space ..我怎样才能做到这一点？

Answer 1

我不是 css 人，但我认为您也需要为内容 div 添加宽度和左浮动。你需要像

这样的东西

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

JSFiddle http://jsfiddle.net/rhzky40e/

Answer 2

我认为这可能有效

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

Link : jsfiddle

Answer 3

今天（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>

Answer 4

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

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

jsfiddle

固定宽度边栏，100% 宽度的可变内容区域 table

Fixed Width Sidebar, Fluid Content area with 100% width table

html

css

responsive-design