表单页面固定高度和响应性

Question

我需要解决以下布局

我知道响应式设计的整个想法是让高度适应内容，但是对于这项特殊的工作，无论我如何解决，客户都希望这样，但我正在努力去实现它

在我的模型中，我有一个 100% 的身高和体重的身体，然后是一个占身体高度 85% 的容器。

在该容器内有以下元素：

1. 带有公司徽标的顶级 div 容器
2. 带有步骤编号的进度条
3. 一个小 div，包含当前步骤的一些说明
4. 包含用户必须填写的表单元素的 Div
5. 带有 2 个导航按钮的底部 div

无论使用何种设备，内容都应始终可见（见下图） 数字 4. 有一个带有 overflow-y 的内部滚动条，因为该内容会改变

为了做到这一点，我为容器内的每个 div 设置了百分比 (%) 的高度，但是我需要对元素进行一些填充，但是当浏览器调整大小或设备更改高度和宽度时，元素会相互重叠

我不想依靠一堆媒体查询来解决这个问题。我想知道是否有人可以为此找到方法或参考，因为我似乎找不到它

谢谢

Answer 1

如果您不想使用很多媒体查询，我认为您应该像这样使用 Jquery（或 Javascript）：

• 除FORM CONTENT 之外的所有div 的固定高度（包括填充、边距、与box-sizing: border-box 的边框）。您可以使用一些媒体查询来获得最佳风格。
• 使用 Jquery 计算FORM CONTENT 的高度（这是可滚动的内容）

例子：

$('#form-content').height($(window).height() - X);

// With X = total height of other divs includes margin, padding, border

在$(document).ready(...) 和$(window).resize(...) 中调用此脚本

希望对您有所帮助。