用高度自动父级将高度除以百分比 [英] Div height by percentage with an auto height parent

查看:70
本文介绍了用高度自动父级将高度除以百分比的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我想根据屏幕高度在所有div上使用相对(百分比)高度。问题是我正在使用自动高度容器元素。有什么办法可以在div上使用相对大小,而在我的父div上仍然具有自动高度。如果将容器的高度设置为100%,一切都会按预期进行,但是我需要根据其内容来扩展它。

I'd like to use relative (in percentage) heights on all my divs based to the height of the screen. Problem is that I'm using an auto-height container element. Is there any way to use relative sizes on divs and still have an automatic height on my parent div. Everything works as expected if i'll set the height of the container to 100%, but i'll need it to expand by it's content.

这基本上就是我现在已经设置好了:

This is basically how i've set things up now:

<html>
<head>
<style>
body, html {
height: 100%;
width: 100%;
}
.container {
height: auto;
width: 100%;
}
.element1 {
height: 15%;
width: 80%;
}
.element2 {
height: 25%;
width: 80%;
}
</style>
</head>
<body>
<div class="container">
    <div class="element1">Some text here</div>
    <div class="element2">Some stuff here</div>
</div>
</body>

我们将不胜感激!

推荐答案

您不能。高度值为 auto 的父级表示父级将扩展以包含其所有子级-因此,容器的高度取决于其子级的高度。

You cannot. A parent with a height value of auto means the parent will extend to contain all its children - therefore the container's height is dependent on its children's height.

如果孩子的身高相对于父母高,则他们的身高取决于父母的身高。

If the children have a height relative to their parent, their height is dependent on the parent's height.

此循环依赖关系使您无法做你描述的是什么。

This circular dependency prevents you from doing what you describe.

这篇关于用高度自动父级将高度除以百分比的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆