Предотвращение скрытого переполнения фиксированного элемента

Question

У меня есть панель содержимого, которая фиксируется в нижней части страницы. Хотя это отлично работает на высоких экранах (где область просмотра выше, чем содержимое панели) на меньших высотах видового экрана (например, мобильный пейзаж) панель исчезает с экрана, а поскольку она равна position: fixed, вы не можете прокручивать содержимое (по вертикали).

HTML:

<div class="panel"> 
    <div class="panel-content"> 
     <p>Panel contents</p> 
    </div> 
</div> 

CSS:

html, 
body { 
    margin: 0; 
    min-height: 100%; 
    background-color: #eee; 
} 

.panel { 
    position: fixed; 
    bottom: 2em; 
    left: 0; 
    right: 0; 
} 

.panel .panel-content { 
    text-align: center; 
    max-width: 30em; 
    margin: 0 auto; 
    padding: 1em; 
    background-color: #fff;  
} 

Fiddle:

http://jsfiddle.net/benfosterdev/eW2b3/

Как я могу гарантировать, что если окно просмотра не является достаточно большим, чтобы соответствовать содержимое панели пользователь может по крайней мере прокрутить содержимое панели? Я бы предпочел только подход CSS, но JavaScript - это вариант.

Обратите внимание, что высота панели является переменной.

Answer 1

Вы уже установили максимальную ширину для панели и .panel-контента. Почему бы не настроить min-width и min-height, чтобы включить переполнение.

JSFiddle