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内容设置了最大宽度。为什么不设置min-width和min-height以启用溢出。

JSFiddle

防止固定元素的隐藏溢出

1 个答案: