Увеличить высоту div автоматически (100% родительский) оставляя верхний и нижний поля?

Question

http://jsfiddle.net/YumHS/

На странице, указанной в jsfiddle der, есть боковая панель в продолжение div.

<section class="cont">
                <div class="sidebar">
                    <ul>
                      <li>sidebar</li>
                    </ul>
                </div>
                <div class="content">
                  <div class="cm_logo"><img src="img/turf_cm_logo.png"></div>
                </div>
</section>

Боковая панель имеет правую границу.Der - это 10px поле в верхней части боковой панели.Точно так же я хочу 10 полей в нижней части.Я использовал 100% высоты, чтобы div.sidebar заполнял весь экран.Но с этим методом поле недоступно внизу, так как я использую липкий нижний колонтитул.Что я могу сделать для этого?Пожалуйста, помогите.

Проверьте jsfiddle для демонстрации, чтобы понять мой вопрос

Answer 1

См. Скрипту и код и демо

Скрипка: http://jsfiddle.net/YumHS/2

Демо: http://jsfiddle.net/YumHS/2/embedded/result/

Обновленная скрипта: 1280 x 800 Разрешение в соответствии с вашими требованиями.

http://jsfiddle.net/YumHS/5/embedded/result/

Чтобы получить желаемый результат, я использую изображение размером 1px x 2000px. и отрегулируйте положение фонового изображения, см. ниже CSS, вы можете установить высоту (см. 110%;) фонового изображения, как вы хотите.

.sidebar {
    position: fixed;
    top: 100px;
    width: 227px;
    /*border-right: 1px solid #949698;*/
    height: 100%;
    background: url("http://img152.imageshack.us/img152/8141/fullbar.png") no-repeat right 110%;
}

В моей системе это выглядит как на картинке ниже:

Обновленная скрипта http://jsfiddle.net/YumHS/11/embedded/result/ - с пробелом в 2 пикселя на боковой панели и в нижнем колонтитуле.