Раздел с гибким содержимым и опциональной боковой панелью

У меня есть вопрос, который я не нашел в различных моделях компоновки CSS, которые я рассматривал, поэтому я решил опубликовать его здесь.

Я работаю над сайтом, который использует базовый гибкий/фиксированный двухколоночный макет. Контент сайта находится в левом div, а боковая панель — в правом. Боковая панель имеет фиксированную ширину около 200 пикселей, а содержимое расширяется, чтобы заполнить оставшуюся ширину родителя.

Вот как выглядит код:

<div style="width: 90%; margin: 10px auto 10px auto;"> <!-- site container -->
   <div style="margin-right: 200px;">Content goes here.</div>
   <div style="float: right; width: 200px;">Menus goes here.</div>
   <div style="clear: both;"></div> <!-- float-clearer div -->
</div>

Это довольно стандартный подход, и по большей части он работает нормально, но проблема в том, что дизайн сайта требует, чтобы боковая панель появлялась только в определенных случаях. Весь HTML генерируется через PHP, и функция "get-content()" не знает, будет ли вызываться функция "get-sidebar()" или нет.

Когда вызывается боковая панель, я бы хотел, чтобы содержимое расширялось, чтобы заполнить родительский div, оставляя достаточно места для боковой панели. Если боковой панели нет, содержимое должно расширяться, чтобы заполнить всю ширину родителя.

Есть ли способ сделать это с помощью CSS — возможно, используя «авто» для полей содержимого — не полагаясь на PHP/JavaScript?


html layout css fluid positioning
person Radek    schedule 27.09.2009    source источник
comment
javascript/jquery может легко вам помочь... если вы не возражаете против его использования.   -  person Aziz    schedule 27.09.2009
comment
К вашему сведению, исходный код, который вы разместили, фактически помещает меню ниже, но справа от области содержимого. По этой причине не имеет значения, есть ли там div меню или нет.   -  person jakeisonline    schedule 27.09.2009

Ответы (3)


arrow_upward
2
arrow_downward

Вы можете сделать это следующим образом:

<div style="width: 90%; margin: 10px auto 10px auto;"> <!-- site container -->
    <div style="background-color:#CCC;height:100%;">
        <div style="background-color:#444;float: right; width: 200px;height:100%;">Menus goes here.</div>
        Content goes here.
    </div>
    <div style="clear: both;"></div> <!-- float-clearer div -->
</div>

Делая это таким образом, меню находится внутри основного блока, и нет правого поля, поэтому, когда меню уходит, текст расширяется, чтобы заполнить пространство.

«Высота: 100%;» гарантирует, что окна меню и содержимого растягиваются на одинаковую высоту. Вы также можете установить это значение в пикселях или em или в процентах меньше 100, если хотите.

person JoshMock    schedule 02.10.2009
comment
Не уверен, что это будет работать с более сложными макетами — контент будет содержать свои собственные плавающие элементы div и другие элементы — но на базовом уровне это хорошее решение. - person Radek; 09.10.2009

arrow_upward
0
arrow_downward

Вместо плавающей боковой панели попробуйте следующее:

#sidebar {
  display: inline-block;
  display: -moz-inline-box;
  -moz-box-orient: vertical;
  vertical-align: top;
  zoom: 1;
  *display: inline;
}
person eozzy    schedule 27.09.2009

arrow_upward
0
arrow_downward

Можно ли добавить класс в тело с помощью PHP? Что-то вроде «один столбец» или «два столбца» в зависимости от контекста. Затем вы можете дать контенту div поле, когда есть боковая панель, но не когда ее нет.

person skybondsor    schedule 28.09.2009