为移动设备中的 div 设置动态高度答案

【问题标题】：Setting a dynamic height for divs in mobile devices为移动设备中的 div 设置动态高度
【发布时间】：2015-09-23 09:27:34
【问题描述】：

这就像一个手机原型，我为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（父div）动态更改height

感谢任何帮助。谢谢。

【问题讨论】：

【解决方案1】：

我试过了，我不确定你是否愿意，但这是我为你准备的……

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

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

【讨论】：

【解决方案2】：

更改 main-container 的 CSS 代码

.main-container {
width: 420px;
height: 1.2em; //change as per your requirements 
background-color: #f7f7f7;

}

【讨论】：