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％的高度和宽度就可以得到你想要的效果。最大宽度/高度不会强制任何值（在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。

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

2 个答案: