Question

使用以下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家伙，但我认为你需要为内容div添加宽度和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>

固定宽度侧边栏，流体内容区域，宽度为100％

4 个答案: