css3 - 自適應高度問題

問題描述

如何在父級p高度是auto的情況下，子級p為父級p的一半，子級p里面有個圖片高度為60(圖片自己的高度，并沒有給圖片高度)。有沒有實現的可能

問題解答

確實描述不清，我想改問題但又怕不是題主想問的問題。試著答一下。

首先你要知道，auto、50%、em這樣的關鍵字或相對單位長度是要計算成確切的值（如px）。如果父元素的高度是auto，那么他是根據子元素的高度計算的。

根據題主描述，最容易想到的是：

<p style='height:auto'> <p style='height:50%'></p></p>

你可以試下，這樣不管用，為什么呢？#p1的高度是是根據#p2的高度計算的。而#p2的高度是#p1的一半。這就產生了相互依賴。

而CSS中的相對單位都是根據父元素計算的，em除外，但在這里用不上。

解決方法

如果你的圖片是確定的高度，那么設置為#p2設置確定的padding-top是最簡單的辦法

如果圖片的高度不是確定的，用JS吧。

問題描述的稍微有點亂、可以編輯一下問題重新說明清楚嗎、還有是用JS實現還是只能用CSS

以CSS來說，高度auto是由內容撐起的，父與子元素都沒有設置高度，那實際高度就只有那張圖片而已

總感覺怪怪的！要實現的話通過js獲取子級p的高度h，再設置父p的高度為h*2

(父auto，子級p中只有一張圖片，子p的高度也就都是圖片高度，直接設置父高120）

不可能，只有不是auto時子才能根據父調整大小

你這不是雞生蛋還蛋生雞的問題么

都沒高度的話，子p就是圖片高度

可以通過js先獲取圖片的高度，再設置子p和父p的高度