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, но цвет фона «страница» будет слева, а фон содержимого будет справа

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

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

вы также можете использовать Б.Г. изображения, если вы так хотите в этом формате Это то, что очень неудобно делать в HTML/CSS ., и вам просто нужно играть, пока вы не получите решение, которое вам подходит Это мне потребовалось дней, чтобы исследовать на моем сайте :(

Answer 2

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

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

Answer 3

Этот сайт:

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

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