Question

我创建了一个非常简单的模式，允许内容减少或扩展而不会离开页面 - 总是在顶部和底部留下10％的边距。当页面不足以包含所有模态内容时，整个模态变为可滚动。

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

Answer 1

这可能会迟到，但我必须解决类似问题的固定割台，流体高度，流体宽度。

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

为元素添加边框框大小。使用包装器居中并创建边界框。这可以是具有最小宽度和最大宽度+百分比的流体。
为您的内容元素提供自动溢出，最大高度为100％;
使用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：

这里是initial demo使用％作为标题高度。我在标题标记中添加了一个px min-height，以防止标题在非常小的屏幕上消失，代价是上边距（在非常小的屏幕上减少）。

在＆gt; = 400px高的屏幕上，它应该完全按照要求工作（40px标题，高度为10％）。如果标题的高度减小，则它将支持稍微更小的屏幕（具有10％高度的30px标题将支持＆gt; = 300px屏幕）。这是demo，标题为30px。

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

另请注意，我添加了h2和.content标记并移动了padding:10px;，以避免在相同元素中合并％高度和填充（这会导致更高高度超过指定的％值。

如何制作具有固定头的弹性高度模态

2 个答案: