html - 表单页面固定高度和响应能力

Question

我有以下布局需要解决

我明白响应式设计的整个思路就是让高度根据内容来调整，但是对于这个特定的工作，客户希望这样，无论如何我都必须弄清楚但我很努力实现它

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

在该容器内有以下元素:

1. A Top div container with the company logo
2. A Progress bar with a step number
3. A small div with some instructions for the current step
4. A Div containing the form elements that the user has to fill
5. A bottom div with 2 navigation buttons

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

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

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

谢谢

Answer 1

如果你不想使用很多媒体查询，我认为你应该像这样使用 Jquery(或 Javascript):

• 除了 FORM CONTENT 之外的所有 div 的固定高度(包括 padding、margin、border with 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(...) 中调用此脚本

希望这对您有所帮助。