css - Div 子项的高度必须为 div 父项的 100%

Question

我有 2 个 div，设置为 60% 宽度但没有设置高度，这是父级。 在它里面我有一个 div，设置为 15% 宽度，100% 高度(不工作)和 float:left。 我也曾尝试说 div 子元素有一个绝对位置 (left:0px;top:0px;bottom:0px;) 但随后来自父 div 的文本超过了它。不是一个好 parent 。

澄清:我没有将两个 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

您的 parent 必须有一个高度值才能让 child 继承。

为了给您举个例子，我删除了您的 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;}

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