如果内容没有侧边栏内容，我如何将内容扩展到100％？

Question

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

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

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

我更喜欢仅使用css来做这件事。

Answer 1

如果您可以在没有侧边栏的情况下向容器添加类，那么您可以执行此操作。

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

Answer 2

首先在标记中插入侧边栏并绝对放置它。然后使用相邻的兄弟选择器（+）在侧边栏后面给内容一个右边距：

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

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

Answer 3

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

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

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

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

Answer 4

您还可以调整两个不同的基本主题（一个有，一个没有，侧边栏），然后使用像Themekey这样的模块来确定您网站的哪些部分显示哪个主题。我倾向于使用单栏主题作为“管理员”的东西，但是你可以很容易地自定义你自己的“外观和感觉”，就像你可能在大多数内容页面上显示的2或3列一样。 / p>

你也可以有一个更改的主题，但是为某些页面选择一个类似的主题（例如单列）可能更容易，而不是动态地改变很多关于一个主题的内容并让它以不同的方式显示在一个主题的不同部分。你的网站。