Как сделать так, чтобы контент расширялся до 100%, если на нем нет контента боковой панели?

Question

Я создаю свою собственную тему для drupal и хотел бы, чтобы при отсутствии боковой панели ширина содержимого составляла 100%, а при наличии боковой панели содержимое сжималось по горизонтали, чтобы освободить место для боковой панели.Вот пример структуры:

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

Все, что мне удалось достичь, это изображение, расположенное дальше всего справа, там, где его окружает содержимое.

Я бы предпочел сделать это, используя только CSS.

Answer 1

Сначала вставьте боковую панель в разметку и расположите ее абсолютно. Затем используйте соседний селектор брата (+), чтобы дать контенту правильное поле, если оно следует за боковой панелью:

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

Демо: http://jsfiddle.net/cH4ZY/2/

Answer 2

Если вы можете добавить класс в контейнер, когда нет боковой панели, то вы можете сделать это.

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

Answer 3

Вы также можете просто настроить две разные базовые темы (одну с боковой панелью, а другую - без), а затем использовать такой модуль, как Themekey , чтобы определить, какие части вашего сайта отображают какую тему. Я склонен использовать темы с одним столбцом для элементов «Администратор», но легко настроить свою собственную так, чтобы она выглядела так же, как ваши 2 или 3 столбца, которые вы можете отображать на большинстве страниц контента.

У вас также может быть тема, которая меняется, но, вероятно, проще выбрать аналогичную тему (например, с одним столбцом) для некоторых страниц, чем динамически менять много об одной теме и отображать ее по-разному в разных частях ваш сайт.

Answer 4

Если ваш друпал не является боковой панелью HTML-структура выглядит так:

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

Затем добавление ниже css после вашего типичного стиля content вызовет 100% ширину, только когда в container есть только content div, потому что тогда это будет last-child контейнер. Когда присутствует sidebar, sidebar будет last-child, и этот CSS не будет запущен для content.

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