按高度百分比设置多个div以填充父div

Question

我有一个设置了最大高度/宽度的父div。我想知道是否可以将两个子div设置为仅使用CSS即可根据百分比自动调整其高度？

HTML：

<div id="parent">
    <div id="top"></div>
    <div id="bottom"></div>
</div>

CSS：

html, body {
    height: 100%;
    width: 100%:
}    

#parent {
    max-width: 400px;
    max-height: 600px;
}

#top {
    height: 30%;
}

#bottom {
    height: 70%;
}

它的预期实现将用于按比例填充屏幕高度而不强制垂直滚动的移动显示器。

编辑:我现在意识到，如果您有固定的父级高度，那么父级的高度百分比将会起作用。问题仍然是，是否有一种方法只使用CSS就可以实现与屏幕尺寸相匹配的灵活高度。这似乎不可能只使用CSS，还需要JS干预。

Answer 1

您的代码没有任何问题。只需向div添加100%的高度和宽度，就可以得到您想要的结果。max-width/height不强制任何值(保留高度/宽度为auto)。这是一个有用的小提琴：

http://jsfiddle.net/b6HVa/

#parent {
  width: 100%;
  height: 100%;
  max-height: 600px;
  max-witdh: 400px;
}

Answer 2

我认为你做的是对的，如果有什么问题，请展示一个演示。或尝试设置

#top{max-height: 30%;}
#bottom{max-height: 70%;}

或者将min-height: {some value}px;添加到您的div。