CSS 布局(2 列布局，但如果没有侧边栏，主列必须 100% 宽)

Question

第 1 列(左)用于内容。 Column2(右侧/边栏)用于相关信息。说布局是 66%/34%。如果没有侧边栏内容，我需要一种方法使 Column1 自动拉伸(stretch)到 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>

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

#container {
    overflow: hidden;
}

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

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