высота боковой панели не меняется вместе с высотой содержимого

Question

Это как боковая панель выглядит как на его начальной стадии: http://i.imgur.com/RE1bFdt.png

И нет никаких проблем, в то время как содержание соответствует оригинальному размеру страницы: http://i.imgur.com/gWZNUOo.png

Но как только столбцы место под другим, высоту боковой панели остается тем же самым оставляя пустое пространство в нижней части: http://i.imgur.com/lKY8L94.png

Боковое место внутри обертки:

#wrap {width: 100%; height: 100%; position: absolute; top: 0; bottom: 0; left: 0; right: 0} 
.sidebar {width: 200px; height: 100%; float: left; background: #65A973; position: relative; bottom: 0px} 

Некоторые HTML

<div id='wrap'> 
     <div class='sideBar'> 
      //something goes here 
     </div> 
     <div id='content'> 
      //something goes here 
     </div> 
     <div class='clear'></div> 
    </div> 

Answer 1

Это формализовать мой комментарий в ответ:

Я предлагаю использовать position:fixed; для следующих CSS для боковой панели:

#sidebar { 
    position:fixed; 
    top:0; 
    bottom:0; 
    left:0; 
    width:[some width]; 
} 

Теперь убедитесь, чтобы увеличить запас для остальной части вашего содержания, так что они не исчезают за боковой:

#contents { 
    margin-left:[sidebar width + normal margin]; 
} 

Обратите внимание, что вы можете больше не прокрутки внутри боковой панели теперь, но скроллинг на остальная часть страницы остается нетронутой.

Answer 2

Добавьте эти свойства.

.sidebar{ 
    width: 200px; 
    height: 100%; 
    position:fixed; 
    display:block; 
    top: 0; 
    } 

Answer 3

Вы хотите, чтобы колонка со 100% -ной высотой расширялась, когда правая колонка высока. Вы сталкиваетесь с этой проблемой, потому что ваши% высоты 100 называются вьюпорт, а не реальный DIV высота

Вы можете достичь этого только с position:absolute в левой колонке (используйте проложенное содержание, чтобы принять правильное выравнивание)

https://jsfiddle.net/2zes2ewL/