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

我有一个最大高度/宽度设置的父级div。我想知道是否可以设置两个孩子divs自动调整他们的高度基于一个百分比使用只是CSS？按高度百分比设置多个div以填充父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干预。

来源

2013-07-10 Josh

你必须设置父的高度：http://jsfiddle.net/dimitardanailov/T5yg7只能用最大高度不工作 –

啊，所以没有办法（不使用js）调整和重新调整大小，无需在css中明确设置高度？ – Josh

#parent必须有一定的身高值。 –

Theres没有错你的代码。只需在div上添加100％的高度和宽度即可获得您想要的效果。最大宽度/高度不强制任何值（在自动时留下高度/宽度）。这里是工作提琴：

http://jsfiddle.net/b6HVa/

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

来源

2013-07-10 04:13:20

虽然你说的是100％正确的，但我的问题有点不同。如果我的屏幕高度低于600像素，该怎么办？如果我设置600px的滚动高度会发生（这是我不想要的）。 – Josh

我已经用解决方案更新了我的答案。 –

这看起来工作:)让我试试看，我们会看到会发生什么。 – Josh

我觉得你是对的，如果有什么问题，请演示一下。或尝试设置

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

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

来源

2013-07-10 04:10:56

最小高度在这个例子中不起作用：http://jsfiddle.net/dimitardanailov/T5yg7/1/ –

正如你的评论，你是有趣的没有高度父母的div，所以我已经放置了最小高度，但你也需要为你的子div设置min-height。因此建议您在父div中设置高度。 –

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

回答

相关问题