如何制作具有固定标题的灵活高度模态

Question

我创建了一个非常简单的模式，允许内容在不超出页面的情况下减少或扩展 - 始终在顶部和底部留下 10% 的边距。当页面高度不足以包含所有模式内容时，整个模式将变得可滚动。

请参阅此处的 jsfiddle

是否可以仅使用 CSS 来复制此行为，但只有模态主体可滚动，因此标题始终是固定的。我已经尝试了一些方法，但还没有找到解决方案。使标题position: fixed几乎可以工作，我必须将其重新定位在模式框上，然后尝试向正文添加填充，以便内容在标题下可见，这不会使滚动条向下移动。在将一些 js 绑定到窗口调整大小并手动操纵主体高度之前，我总是喜欢用尽所有 css 替代方案。

Answer 1

这可能已经晚了，但我必须解决固定标题、流体高度、流体宽度的类似问题。

这就是我解决这个问题的方法：

• 为您的元素设置边框框大小。使用包装器居中并创建边界框。这可以是一种具有最小宽度和最大宽度+百分比的流动形式。
• 为您的内容元素指定 auto 的overflow-y 和 100% 的 max-height；
• 使用 box-sizing:border-box;

完整的代码应该是这样的：

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
.modal {
    position: fixed;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.8);
}
.wrap {
   position: relative;
   margin: 0 auto;
   display: block;
   width: 90%;
    /* Change the max-width value on a media query breakpoint to make this example more "responsive" */ 
    max-width: 500px;
    height: 90%;
    padding: 30px;
}
.modal header {
    height: 30px;
    padding: 0;
    color: #FFF;
    background-color: #007;
}
.modal .body {
    background-color: #FFF;
    max-height: 100%;
    overflow-y: auto;
}

http://jsfiddle.net/mariomc/EhR7r/

Answer 2

将max-height和overflow-y设置应用于.body而不是.wrap...？

编辑1：

到目前为止，在约束范围内没有任何结果，这表明 JavaScript 或偏离了约束（使用 % 作为标题高度或 px 边距）。

编辑2：

这是使用 % 作为标题高度的初始演示。我min-height在标题标签中添加了一个 px，以防止标题在非常小的屏幕上几乎消失，但会牺牲顶部边距（在非常小的屏幕上会减少）。

在高度 >= 400px 的屏幕上，它应该完全按照要求工作（40px 标题，10% 高度）。如果标题的高度降低，它将支持稍小的屏幕（高度为 10% 的 30 像素标题将支持 >= 300 像素的屏幕）。这是一个带有 30px 标题的演示。

这是一个笨拙的解决方案，但它是唯一一个不使用 JavaScript 的解决方案。

另请注意，我添加了h2和.content标签并将其移至padding:10px;此处，以避免在同一元素中组合 % 高度和填充（这会导致高度高于指定的 % 值）。