固定宽度的侧边栏，带有100％宽度表的流体容纳区域

Question

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

使用以下CSS：

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

问题在于表格，由于已将其设置为100％，因此它实际上低于侧边栏。 如果我删除宽度：100％规则，它可以正常工作，但是我需要该表来用完父div容器的所有空间。如何实现？

Answer 1

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

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

jsfiddle

Answer 2

我不是css的人，但我认为您也需要为content div添加width和float-left。 你需要类似的东西

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

JSFiddle http://jsfiddle.net/rhzky40e/

Answer 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

Answer 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>