html - 在移动设备中为 div 设置动态高度

Question

检查这个FIDDLE

这就像一个手机原型(prototype)，我将 header-div 和 footer-div 的高度固定为 50px。

我希望 content-div 根据 main-container(这里充当移动屏幕大小)动态调整其高度。调整内容溢出应仅在可见的 content-div 高度滚动。

如果我将 header-div 和 footer-div 高度都设置为 10% 和 content-div 高度80%。以便它根据屏幕大小排列。这里的问题是页眉和页脚的高度会根据屏幕尺寸而变化，因此会使 header-div 和 footer-div 的高度变大/变小。

这就是为什么我为 header-div 和 footer-div 设置了一定的高度，都是 50px。现在我希望 content-div 以这样一种方式进行调整，即根据 main-container (父级)动态更改其 height格)

感谢任何帮助。谢谢。

Answer 1

我试过了，我不确定你是否喜欢那样，但这就是我为你准备的...

将 main-container 的 CSS 代码更改为此。

 .main-container {
    width: 420px;
    height: auto;
    background-color: #f7f7f7;
}