Html 将高度设置为父元素的100%

如何将元素的高度设置为其父元素的100%

在下面的代码中，我试图将

的高度设置为100%

其同级元素

的高度根据其中的文本量而变化，从而改变父元素

的高度

不管父元素是什么，我都在寻找

元素=100%的高度

在小提琴中，“描述”框的高度应为100%，以在页面左侧创建一个灰色条带的效果

*，
*：之前，
*：之后{
-webkit框大小：边框框；
-moz框大小：边框框；
框大小：边框框；}
.课程信息{
列表样式：无；
保证金：0；
填充：0；
浮动：左；
宽度：100%；
边缘底部：2米；
}
.课程信息李{
宽度：100%；
浮动：左；
显示：块；
}
.课程资讯组{
浮动：左；
宽度：60%；
}
.课程信息强{
宽度：35%；
浮动：左；
显示：块；
背景#f4；
颜色：#888；
身高：100%；
}

说明
文本在这里。这里的文字量各不相同。随着其增加，左侧的强元素应增加以填充父li元素
参与者人数上限学习基本对话
会议次数5人

您可以通过将其从

转换为

来轻松完成此操作，后者本机支持您尝试执行的操作

用户在下面的评论中提供了此答案的

版本

---

要使用当前设置执行此操作，您可以执行以下操作：

CSS

---

浮动元素和高度：100%不能很好地结合在一起，因为浮动从正常文档流中删除。使用绝对定位元素与左侧边距混合可以达到相同的效果（如所提供的示例中所示）

这里构建的是一个表。您应该只使用元素

，它内置了对您试图做的事情的支持，如果您想将它添加到您的答案中：）这是正确的解决方案。

.course-info li {
    width: 100%;
    display: block;
    position:relative; /* no float, add position relative */
}

.course-info div {
    margin-left:35%; /* margin-left instead of floating */
    width: 60%;
}

.course-info strong {
    width: 35%;
    display: block;
    background: #f4f4f4;
    color: #888;
    height: 100%;
    position:absolute; /* absolute position. No floats. positions relative to parent li */
}