div 子级的高度需要为 div 父级的 100%

Question

我有 2 个 div，其宽度设置为 60%，但没有设置高度，这是父级。 在它里面我有一个 div，设置为 15% 宽度、100% 高度（不起作用）和 float:left。 我还试图说 div 子级具有绝对位置（左：0px；顶部：0px；底部：0px；），但父级 div 中的文本会覆盖它。不是什么好父母。

澄清：我不会在父级中放置两个 div，而只在父级中放置一个（子级 div）。但我确实在父 div 中放置了一些文本。

这是 css 代码（有点乱）：

#parent{position:absolute;right:20%;width:60%;background-image:url('x.png');direction:rtl;margin-top:-1px;}
#child{width:15%;padding-right:12px;margin-top:-5px;padding-top:5px;float:left;height:100%;background-image:url('y.png');}

这是 html 代码：

<div id="parent">
<div id="child">line 1<br>line 2<br>line 3<br></div>
some text here. some text here. some text here. some text here. some text here. some text here. some text here. some text here. some text here. some text here.
</div>

请帮助我！

更新：

我无法给父 div 一个固定的高度，因为我需要它根据内容（即无法超越子 div 的文本）进行自我调整。看到问题了吗？ 给我一种完全不同的方法很好，我愿意学习。

Answer 1

您的父母必须有一个身高值供孩子继承。

为了给您提供示例，我删除了 CSS 中与答案不直接相关的部分。

在您的 CSS 示例中，子 div 正在执行 100% 的非设置值。
这不会像你期望的那样工作：

#parent{background:#F00;}
#child{float:left; height:100%; background:#FF0;}

这会工作：

#parent{height:500px; background:#F00;}
#child{float:left; height:100%; background:#FF0;}

如果我不明白，请告诉我，但我相信这回答了你的问题。