Question

Column1（左）代表内容。 Column2（右/侧栏）用于相关信息。说布局是66％/ 34％。如果没有侧边栏内容，我需要一种方法让Column1自动拉伸到100％。有任何想法吗。我知道可以做到。我只是不记得怎么样。

+---------+---------+
| Content | sidebar |
+---------+---------+


+-------------------+
|Content/ no-sidebar|
+-------------------+

Answer 1

您可以尝试这样的事情。以下是两种不同的HTML案例：

使用侧边栏：

<div id="container">
    <div id="sidebar">some content</div>
    <div id="main_content">main content</div>
</div>

没有侧边栏：

<div id="container">
    <div id="main_content">main content</div>
</div>

这是CSS有条件地改变main_content div的大小：

#container {
    overflow: hidden;
}

#sidebar {
    width: 34%;
    float: right;
}

#main_content {
    width: 100%;
    float: left;
}
#main_content:nth-child(2) {
    width: 66%;
}

Answer 2

您可以设置HTML格式;

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

和CSS喜欢;

#container{
    width: 100%;
}
#sidebar, #content{
    height: 200px;

}
#sidebar{
    width: 200px;
    float: left;
}
#content{
    background: orange;
}

您可以用百分比替换px。 Here 是一个现场演示。

CSS布局（2列布局，但如果没有侧栏主列必须100％宽）

2 个答案: