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

Question

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

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% 的高度和宽度即可产生您想要的效果。最大宽度/高度不强制任何值（将高度/宽度保留为自动）。这是一个工作小提琴：

http://jsfiddle.net/b6HVa/

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