Question

尝试设置假模态对话框的样式，以便无论浏览器大小如何，用户始终可以使用基本的导航和操作按钮（即保存，关闭）。这意味着将页眉和页脚固定到位，但使内容滚动。

获取标题很容易，但我遇到其他要求的问题，即：

内容目前采用fliud双列布局。将其容器设置为可滚动（即overflow：auto）可能不出所料地导致它恢复到单个列以填充所有空间。这有一个简单的解决方案吗？将另一个包装器放在容器周围并使其可滚动，例如？
我无法弄清楚如何让页脚修复到模态的底部我可以轻松地将其修复到页面的底部，但无论我对位置，显示和溢出做什么，我都无法让它留在模态容器内。

感激地收到任何建议。我已经处于样式表地狱中，所以我有点不愿意发布我已经拥有的内容 - 但如果有必要的话，我会这样做。

编辑 - 请求的代码。这是我在尝试修复页脚并滚动内容之前所拥有的。这是：

首先，模态容器：

.dialog-outer {
    background-color: #F7F7F7;
    border: 1px solid #888888;
    border-radius: 5px;
    box-shadow: 0 0 5px 5px #C1C1C1;
    color: #000000;
    display: inline-block;
    font-size: 0.8em;
    max-height: 90%;
    text-align: left;
    vertical-align: middle;
}

部首：

.dialog-header {
    border-bottom: 1px solid #888888;
    height: 30px;
    margin: 5px;
}

导航（位于主要内容之前的标题下）：

.dialog-navigation {
    height: 32px;
    margin: 5px;
}

主要内容

.dialog-maincolumn {
    float: left;
}

左列/右列在主列内分割：

.dialog-contentblock {
    display: inline-block;
    margin-left: 10px;
    margin-right: 20px;
    position: relative;
    vertical-align: top;
}

页脚：

.dialog-actions {
    clear: both;
    margin: 5px;
    padding-top: 10px;
    text-align: right;
}

CSS：具有固定页眉，页脚和可滚动内容的模态对话框

0 个答案: