Боковая панель с липким нижним колонтитулом и динамическим контентом

Question

Я получил этот макет из другого вопроса stackoverflow (jsfiddle link в конце), и он работает (нижний колонтитул снизу и движется вниз, когда содержимое становится больше): working sidebar

Но есть одна огромная проблема: Моя боковая панель не будет иметь фиксированный размер и будет в основном превышать всю страницу. Но если я добавлю содержимое на боковую панель, скрипт больше не работает: buggy sidebar

Что мне делать, чтобы исправить эту проблему? Было бы очень приятно, если бы вы добавили рабочий JSFiddle к вашему ответу.

Заранее спасибо.

JSFiddle, Snippet ниже:

html, body { 
 
\t margin: 0px; 
 
\t padding: 0px; 
 
\t min-height: 100%; 
 
\t height: 100%; 
 
} 
 
#wrapper { 
 
\t min-height: 100%; 
 
\t height: auto !important; 
 
\t height: 100%; 
 
\t margin: 0 auto -50px; /* the bottom margin is the negative value of the footer's height */ 
 
\t position: relative 
 
} 
 
#footer { 
 
\t height: 50px; 
 
} 
 
#footer-content { 
 
\t border: 1px solid magenta; 
 
\t height: 32px; /* height + top/bottom paddding + top/bottom border must add up to footer height */ 
 
\t padding: 8px; 
 
} 
 
.push { 
 
\t height: 50px; 
 
\t clear: both; 
 
} 
 

 
#header { 
 
\t height: 50px; 
 
} 
 
#header-content { 
 
\t border: 1px solid magenta; 
 
\t height: 32px; /* height + top/bottom paddding + top/bottom border must add up to footer height */ 
 
\t padding: 8px; 
 
} 
 
#content { 
 
\t height: 100%; 
 
} 
 
#sidebar { 
 
\t border: 1px solid skyblue; 
 
\t width: 100px; 
 
\t position: absolute; 
 
\t left: 0; 
 
\t top: 50px; 
 
\t bottom: 50px; 
 
} 
 
#main { 
 
\t margin-left: 102px 
 
}

<div id="wrapper"> 
 
\t <div id="header"><div id="header-content">Header</div></div> 
 
\t <div id="content"> 
 
\t \t <div id="sidebar">Sidebar<br/>Sidebar<br/>Sidebar<br/> 
 
\t \t </div> 
 
\t \t <div id="main"> 
 
\t \t \t Main<br /> 
 
\t \t \t Main<br /> 
 
\t \t </div> 
 
\t </div> 
 
\t <div class="push"></div> 
 
</div> 
 
<div id="footer"><div id="footer-content">Footer</div></div>

Answer 1

Я думаю, что этот код будет решить вашу проблему. Моя база кода на table display и 100vh height с calc, что меньше высоты верхнего и нижнего колонтитулов.

Теперь у вас есть динамический сайдбар:

html, body { 
 
margin: 0px; 
 
padding: 0px; 
 
min-height: 100%; 
 
height: 100%; 
 
} 
 

 
#wrapper { 
 
height: auto !important; 
 
} 
 

 
#footer { 
 
z-index: 1; 
 
height: 50px; 
 
} 
 

 
#footer-content { 
 
background: magenta; 
 
height: 32px; /* height + top/bottom paddding + top/bottom border must add up to footer height */ 
 
padding: 8px; 
 
} 
 

 
#header { 
 
height: 48px; 
 
} 
 

 
#header-content { 
 
background: magenta; 
 
height: 32px; /* height + top/bottom paddding + top/bottom border must add up to footer height */ 
 
padding: 8px; 
 
} 
 

 
#content { 
 
display: table; 
 
width: 100%; 
 
min-height: calc(100vh - 98px); 
 
} 
 

 
#sidebar { 
 
z-index: -1; 
 
display: table-cell; 
 
background: skyblue; 
 
width: 100px; 
 
} 
 

 
#main { 
 
display: table-cell; 
 
}

<div id="wrapper"> 
 
<div id="header"><div id="header-content">Header</div></div> 
 
<div id="content"> 
 
    <div id="sidebar"> 
 
     Sidebar<br/> 
 
     Sidebar<br/> 
 
     Sidebar<br/> 
 
     Sidebar<br/> 
 
     Sidebar<br/> 
 
     Sidebar<br/> 
 
     Sidebar<br/> 
 
     Sidebar<br/> 
 
     Sidebar<br/> 
 
     Sidebar<br/> 
 
     Sidebar<br/> 
 
     Sidebar<br/> 
 
     Sidebar<br/> 
 
     Sidebar<br/> 
 
     Sidebar<br/> 
 
     Sidebar<br/> 
 
     Sidebar<br/> 
 
     Sidebar<br/> 
 
     Sidebar<br/> 
 
     Sidebar<br/> 
 
     Sidebar<br/> 
 
     Sidebar<br/> 
 
     Sidebar<br/> 
 
     Sidebar<br/> 
 
    </div> 
 
    <div id="main"> 
 
     Main<br /> 
 
     Main<br /> 
 
    </div> 
 
</div> 
 
</div> 
 
<div id="footer"><div id="footer-content">Footer</div></div>

Fiddle demo