Задача CSS: два фоновых изображения, центрированный столбец с фиксированной минимальной высотой 100% - PullRequest
Новая
       17

Задача CSS: два фоновых изображения, центрированный столбец с фиксированной минимальной высотой 100%

1 голос
/ 05 апреля 2010

В двух словах

Мне нужно решение CSS для следующих требований:

  • Два вертикально повторяющихся фоновых изображения: одно выровнено по левому краю, другое по правому краю
  • Одна центрированная колонна сверху с фиксированной шириной и минимальной высотой 100%
  • Совместимость с различными браузерами

Немного подробнее

Сегодня появилось новое требование для моего текущего проекта веб-сайта: фоновое изображение с градиентами слева и справа (заменяет текущее фоновое изображение тела). Теперь задача состоит в том, чтобы указать два разных фоновых изображения, сохраняя при этом остальную часть макета. К сожалению (простой) макет почему-то не сочетается с двумя фонами.

Мой макет в основном представляет собой один центрированный столбец с фиксированной шириной: 

#main_container {
    background-color: white;
    margin: 0 auto;
    min-height: 100%;
    width: 800px;
}

Кроме того, необходимо растянуть столбец до минимальной высоты 100%, поскольку на некоторых страницах содержится лишь небольшое количество контента. Об этом позаботятся следующие стили CSS: 

html {
    height: 100%;
}

body {
    background-image: url('old-background.png');
    margin: 0;
    height: 100%;
    padding: 0;
}

Пока все хорошо - пока не появилось новое фоновое изображение тела с градиентами. Я попробовал следующие решения

  1. Два абсолютных позиционных элемента за основным контейнером
  2. Одно изображение, определенное с телом, одно с HTML-классом HTML
  3. Одно изображение определено с телом, другое с большим делителем, начиная с основного контейнера

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

Ответы [ 3 ]

2 голосов
/ 05 апреля 2010

Изменено: 

<body>
  <div class="container"><div>
  <div id="main_content"></div>
</body>

С помощью css: 

html {
  height: 100%;
}
body {
  background: url(left.png) repeat-y top left;
  background-attachment:fixed;
  height: 100%;
  margin: 0;
  padding: 0;
}
div.container {
  background: url(right.png) repeat-y top right;
  height: 100%;
  width: 100%;
  position:fixed; /* This won't work in all browsers. May need a JS solution for IE6 */
}
#main_content {
  height: 100%;
  width: 800px;
  margin: 0 auto;
  background-color: white;
}

Редактировать:

Эта версия работает для браузеров, поддерживающих position:fixed(не ie6).

Пример страницы: http://jsbin.com/ebozi3/4/edit

0 голосов
/ 05 апреля 2010

Используя «таблицу раскладок», моя проблема может быть решена. Однако было бы предпочтительнее использовать чистое CSS-решение!

Вот решение на основе рабочего стола: 

table.layout {
  border-collapse: collapse;
  height: 100%;
  margin: 0;
  padding: 0;
  width: 100%;
}

table.layout td {
  margin: 0;
  padding: 0;
  vertical-align: top;
}

td.layout_left {
  background-image: url('background-left.png');
  background-position: top left;
  background-repeat: repeat-y;
}

td.layout_center {
  background-color: white;
  width: 800px;
}

td.layout_right {
  background-image: url('background-right.png');
  background-position: top right;
  background-repeat: repeat-y;
}

И HTML-код: 

<table class="layout">
  <tr>
    <td class="layout_left">&nbsp;</td>
    <td class="layout_center">
      <!-- content -->
    </td>
    <td class="layout_right">&nbsp;</td>
  </tr>
</table>
0 голосов
/ 05 апреля 2010

[обновляют]

Я глупый. Очень.
Проблема: body должен иметь изображения bg, #main_container должен иметь ширину 800 и в центре.
(Паршивый подход: я делал #main_container с изображениями bg, не по центру, 800px.)

Новый подход: я предлагаю div внутри body и span внутри этого нового div: 

<body>
<div>
<span>
  <div id="main_container">
    Regular contents.
  </div>
</span>
</div>
</body>

Тогда: 

body {
  background: url(img/bg_left.gif) repeat-y top left;
}
body>div {
  background: url(img/bg_right.gif) repeat-y top right;
}
body>div: {
  text-align: center;
}
body>div>span {
  display: inline-block;
  /* IE only likes this rule on elements that are inline by nature, thus the use of span.
  I'm not sure 100% height will work on #main_container. */
}

И ваши обычные правила: 

#main_container {
  background-color: white;
  margin: 0 auto;
  min-height: 100%;
  width: 800px;
}
...