防止固定元素的隱藏溢出

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;  
} 

小提琴：

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

我怎麼能保證，如果視不夠大，以適應面板內容用戶至少可以滾動面板內容？我更喜歡只使用CSS的方法，但JavaScript是一種選擇。

請注意，面板的高度是可變的。

Answer 1

您已經爲panel和.panel-content設置了最大寬度。爲什麼不設置min-width和min-height以啓用溢出。

JSFiddle