Question

我有以下需要解决的布局

据我所知，响应式设计的整个想法是留下适应内容的高度，但对于这项特殊的工作，客户想要这样，不管我怎么弄清楚，但我在努力奋斗实现它

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

在该容器内有以下元素：

带有公司徽标的顶级div容器

步骤编号为
的进度条
一个小div，其中包含当前步骤的一些说明

包含用户必须填写的表单元素的Div

带有2个导航按钮的底部div

无论使用何种设备，内容都应始终可见（参见下图） Number 4.内部滚动条带有overflow-y，因为该内容将更改

为了做到这一点，我为容器中的每个div设置了百分比（％）的高度，但是我需要为元素添加一些填充，但是当浏览器调整大小或设备更改高度和宽度时，元素会相互重叠< / p>

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

由于

Answer 1

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

除了div之外的所有FORM CONTENT的固定高度（包括填充，边距，与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(...)

中调用此脚本

希望得到这个帮助。