Bezdepbonusu7Программирование: статьи и ответы
Меню

Вопрос

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

Автор вопроса: RadekОтветов: 3

У меня есть вопрос, который я не нашел в различных моделях компоновки 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?

  • javascript/jquery может легко вам помочь... если вы не возражаете против его использования. Aziz 27.09.2009
  • К вашему сведению, исходный код, который вы разместили, фактически помещает меню ниже, но справа от области содержимого. По этой причине не имеет значения, есть ли там div меню или нет. jakeisonline 27.09.2009

htmllayoutcssfluidpositioning

Ответы

Ответ 1 · рейтинг 2 · JoshMock

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

<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, если хотите.

Ответ 2 · eozzy

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

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

Ответ 3 · skybondsor

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

Перевод вопроса и ответов сообщества Stack Overflow, лицензия CC BY-SA. Оригинал на Stack Overflow.

Похожие материалы