css3 - 自适应高度问题

Question

如何在父级p高度是auto的情况下，子级p为父级p的一半，子级p里面有个图片高度为60(图片自己的高度，并没有给图片高度)。有没有实现的可能

Answer 1

确实描述不清，我想改问题但又怕不是题主想问的问题。试着答一下。

首先你要知道，auto、50%、em这样的关键字或相对单位长度是要计算成确切的值（如px）。
如果父元素的高度是auto，那么他是根据子元素的高度计算的。

根据题主描述，最容易想到的是：

<p id="p1" style="height:auto">
    <p id="p2" style="height:50%"></p>
</p>

你可以试下，这样不管用，为什么呢？#p1的高度是是根据#p2的高度计算的。而#p2的高度是#p1的一半。这就产生了相互依赖。

而CSS中的相对单位都是根据父元素计算的，em除外，但在这里用不上。

解决方法

1. 如果你的图片是确定的高度，那么设置为#p2设置确定的padding-top是最简单的办法

2. 如果图片的高度不是确定的，用JS吧。

Answer 2

问题描述的稍微有点乱、可以编辑一下问题重新说明清楚吗、还有是用JS实现还是只能用CSS

Answer 3

以CSS来说，高度auto是由内容撑起的，父与子元素都没有设置高度，那实际高度就只有那张图片而已

Answer 4

总感觉怪怪的！
要实现的话通过js获取子级p的高度h，再设置父p的高度为h*2

(父auto，子级p中只有一张图片，子p的高度也就都是图片高度，直接设置父高120）

Answer 5

不可能，只有不是auto时子才能根据父调整大小

Answer 6

你这不是鸡生蛋还蛋生鸡的问题么

Answer 7

都没高度的话，子p就是图片高度

Answer 8

可以通过js先获取图片的高度，再设置子p和父p的高度