2 столбца CSS с плавающей разметкой

Question

Вытягивание волос с помощью этого простого макета CSS.У меня есть фиксированный макет из 2 столбцов с верхним и нижним колонтитулом, содержащимися в оболочке.Мне нужно, чтобы «левая» фоновая область в CSS автоматически расширялась до нижнего колонтитула, когда содержимое в «правом» столбце длиннее (как в приложении. Я пробовал «height: 100%;», и это не работает.

Кто-нибудь может помочь?

http://eyes -open.com / index.html

Answer 1

Да, эта проблема раздражает.

Другим решением было бы иметь контейнер div в том цвете, который вам нужен, а затем сделать содержимое другим цветом:

<style>
#page { background-color:blue; width: 996px; etc }
#contents { background-color:red; etc }
</style>
<div id="page">
     <div id="sidebar">
    </div>
    <div id="contents">
   </div>
</div>

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

 _____________________
|   |                 |
|   |                 |
|   |                 |
|   |                 |
|___|                 |
|___|_________________|

с divs, но цвет фона "страницы" будет слева, а фон контента будет справа

Надеюсь, это поможет.Это страдает, когда справа меньше левого: (

edit:

, вы также можете использовать изображения bg, если хотите, в этом формате. Это то, что очень неудобно делатьв html / css, и вам просто нужно играть, пока не получите подходящее решение. Мне потребовались дни, чтобы найти мой сайт: (

Answer 2

Этот сайт:

http://matthewjamestaylor.com/blog/perfect-2-column-left-menu.htm

Имеет несколько отличных примеров всех видов таких макетов, которые очень хорошо сделаны и (относительно) чисты. Это то, что я использовал в прошлом, и они работают очень хорошо. Они немного сложны, но они работают, и это печально известная проблема в CSS, которая не может быть легко решена. Приведенное выше решение является лучшим, самым чистым и самым надежным решением, которое я нашел.

Answer 3

http://www.alistapart.com/articles/fauxcolumns/

Сделайте поддельное изображение bg и повторите его вертикально вниз на контейнере обоих.убедитесь, что контейнер очищает поплавки.