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

Question

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

在下面的代码中，我尝试设置 <strong> 的高度到 100%。

它兄弟的高度，<div>元素根据其中的文本量而变化，从而改变父元素的高度 <li>元素。

不管父级<li>元素，我正在寻找 <strong> 的高度元素 = 100%。

在 Fiddle 中，“描述”框的高度应为 100%，以在页面左侧创建单个灰色 strip 的效果。

*,
*:before,
*:after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box; }  

.course-info {
	list-style: none;
	margin: 0;
	padding: 0;
	float: left;
	width: 100%;
	margin-bottom: 2em;
}

.course-info li {
		width: 100%;
		float: left;
	    display: block;
}

.course-info div {
	float: left;
	width: 60%;
}

.course-info strong {
	width: 35%;
	float: left;
	display: block;
	background: #f4f4f4;
	color: #888;
	height: 100%;
}

 
     <ul class="course-info">
     
     
     <li><strong>Description </strong> 
			<div>Text here. The amount of text here varies. As it increases, the strong element on the left should increase to fill the parent li element.</div></li>
    
     <li><strong>Participants max.</strong><div>Learn basic conversation</div></li>
    
     <li><strong>Number of sessions</strong><div>5 Persons</div></li>
   
	 </ul>     

Answer 1

您可以通过从 <ul> 转换它来轻松地做到这一点到 <table>它 native 支持你正在尝试做的事情。

用户 misterManSam提供 <table> this jsbin demo 中此答案的版本在下面的评论中

---

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

http://jsfiddle.net/4tjama61/

CSS

.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 */
}

float 元素和height:100%不要一起玩耍，因为 float 从正常文档流中删除。使用绝对定位元素与 margin-left 混合可以实现相同的效果(如提供的示例)