Question

<div class="table">
    <div class="sidebar"></div>
    <div class="content"></div>
</div>

* {
    margin:0; padding:0;
}
html, body {
    width:100%;
    height:100%;
}
.table { 
    display:table;
    width:100%;
    height:100%;
}
.sidebar {
    width:200px;
    height:100%;
    background:red;
    display:table-cell;
    white-space:nowrap;
    vertical-align: top;
}
.content {
    width:100%;
    height:100%;
    background:orange;
    display:table-cell;
    vertical-align: top;
}

我到底错过了什么？ :)，试图复制这个结构： http://dev.brigademarketing.com/brigade/old-content/site1/

小提琴： http://jsfiddle.net/8o50f0cf/

Answer 1

从动态列中删除width:100%，以便自动计算其宽度。

Updated Fiddle

display: table-cell元素的作用类似于<td>，这意味着如果没有定义width，它会占用其父表的剩余空间。

Answer 2

这是一个使用calc()函数和浮动的解决方案：http://jsfiddle.net/jyx9orLy/。

HTML：

<div class="container">
    <div class="sidebar"></div>
    <div class="content"></div>
</div>

CSS：

* {
    margin: 0; 
    padding: 0;
}

html, body, .container {
    height: 100%;
}

.container .sidebar {
    height: 100%;
    background-color: red;
    width: 200px;
    float: left;
}

.container .content {
    float: left;
    height: 100%;
    width: calc(100% - 200px);
    background-color: orange;
}

第二个解决方案是使用您正在执行的表，并使其工作，您可以执行@LcSalazar提到的操作。

第三种解决方案使用flexbox规范，需要现代浏览器：http://jsfiddle.net/yp49uqay/。

CSS：

* {
    margin: 0; 
    padding: 0;
}

html, body, .container {
    height: 100%;
}

.container {
    display: flex;
    flex-direction: row;
}

.container > .sidebar {
    flex: 0 0 200px;
    background-color: red;
}

.container > .content {
    flex: 1 1 auto;
    background-color: orange;
}

并且，第四种以不同方式使用浮动的解决方案：http://jsfiddle.net/079sr0fu/。

HTML：

<div class="container">
    <div class="sidebar"></div>
    <div class = "contentWrapper">
        <div class="content">Content...</div>
    </div>
</div>

CSS：

* {
    margin: 0; 
    padding: 0;
}

html, body, .container, 
.container > .sidebar, 
.container > .contentWrapper,
.container > .contentWrapper > .content {
    height: 100%;
}

.container > .sidebar {
    width: 200px;
    background-color: red;
    float: left;
}

.container > .contentWrapper {
    overflow: hidden;
}

.container .content {
    float: left;
    width: 100%;
    background-color: orange;
}

一列静态宽度，而另一列是动态宽度

2 个答案: