2

我有一个设置了最大高度/宽度的父 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 干预是不可能的。

4

2 回答 2

5

你的代码没有问题。只需将 100% 的高度和宽度添加到 div 即可产生您想要的结果。最大宽度/高度不强制任何值（将高度/宽度保留为自动）。这是一个工作小提琴：

http://jsfiddle.net/b6HVa/

#parent {
  width: 100%;
  height: 100%;
  max-height: 600px;
  max-witdh: 400px;
}
于 2013-07-10T04:13:20.457 回答
0

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

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

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

于 2013-07-10T04:10:56.410 回答