4

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

在这里查看 jsfiddle

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

4

2 回答 2

4

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

这就是我解决问题的方式：

  • 给你的元素一个边框框大小。使用包装器居中并创建边界框。这可以是具有最小宽度和最大宽度+百分比的流体。
  • 给你的内容元素一个 auto 的溢出和 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/

于 2014-02-17T18:04:16.280 回答
1

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

编辑1：

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

编辑2：

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

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

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

另外，请注意，我添加了一个h2和一个.content标签并将其移动到padding:10px;那里，以避免在相同的元素中组合 % 高度和填充（这会导致比指定的 % 值更高的高度）。

于 2013-03-05T19:27:59.123 回答