设置div的动态高度在移动设备

Question

入住这FIDDLE

这就好比手机样机在那里我有固定的50px高度header-div和footer-div。

我希望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

我尝试这样做，我不知道你是否会喜欢这种方式，但这里就是我要告诉你......

改变你的CSS代码为main-container了这一点。

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

Answer 2

变化为main-container

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

} 

Web Style Sheets CSS tips & tricks