如果它们没有侧边栏内容，我如何让内容扩展到 100%？答案

【问题标题】：How do I get content to expand to 100% should their be no sidebar content?如果它们没有侧边栏内容，我如何让内容扩展到 100%？
【发布时间】：2012-03-04 19:11:40
【问题描述】：

我正在为 drupal 创建自己的主题，并且希望在没有侧边栏时，内容宽度为 100%，而当有侧边栏时，内容会水平缩小以为侧边栏留出空间。下面是一个结构示例：

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

到目前为止，我所做的只是最右边的图像，内容环绕它。

我更喜欢只使用 css。

【问题讨论】：

这似乎是在服务器端完成的理想选择。这有可能吗？
@michaelward82 可能，但我没有真正的drupal 或php 经验，所以我不知道从哪里开始。

标签： html css drupal layout css-float

【解决方案1】：

首先在标记中插入侧边栏并绝对定位。然后使用相邻的兄弟选择器（+）在内容跟随侧边栏时为内容提供右边距：

#sidebar {
    position: absolute;
    right: 0;
    width: 150px;
}
#sidebar + #content {
    margin-right: 150px;
}

演示： http://jsfiddle.net/cH4ZY/2/

【讨论】：

【解决方案2】：

如果你可以在没有侧边栏的情况下给容器添加一个类，那么你可以这样做。

#container.wide #content {
    width: 100%;
}
#container.wide #sidebar {
    display: none;
}

【讨论】：

【解决方案3】：

如果你的drupal 非侧边栏 html 结构是这样的：

<div id='container'>
   <div id='content'></div>
</div>

然后在典型的 content 样式之后添加以下 css 将导致仅当 container 中只有 content div 时才会出现 100% 宽度，因为它将是 last-child 的容器。当sidebar 存在时，sidebar 将是last-child，并且不会为content 触发此CSS。

#container > #content:last-child {
   width: 100%;
}

【讨论】：

【解决方案4】：

您也可以只调整两个不同的基本主题（一个带有侧边栏，一个不带侧边栏），然后使用Themekey 之类的模块来确定您网站的哪些部分显示哪个主题。我倾向于将单列主题用于“管理”内容，但很容易自定义自己的主题，使其具有与大多数内容页面上可能显示的 2 或 3 列主题相同的“外观和感觉”。

您也可以有一个更改的主题，但是为某些页面选择一个相似的主题（例如，单列）可能比动态更改一个主题并让它在不同部分以不同的方式显示更容易您的网站。

【讨论】：