css3 - 自适应高度问题

问题描述

问 题

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

解决方案

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

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

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

<div id="div1" style="height:auto">
    <div id="div2" style="height:50%"></div>
</div>

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

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

解决方法

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

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

这篇关于css3 - 自适应高度问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！