Question

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

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

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

无论父<li>元素是什么，我都在寻找<strong>元素= 100％的高度。

在小提琴中，＆＃34;描述＆＃34;框应该具有100％的高度，以在页面左侧创建单个灰色条带的效果。

＆＃13;

*,
*: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%;
}

＆＃13;

 
     <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>

＆＃13;

Answer 1

您可以轻松地将其从<ul>转换为本身支持您要执行的操作的<table>。

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

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

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

当浮动元素从正常文档流中移除时，浮动元素和height:100%不能很好地协同工作。使用与margin-left

混合的绝对定位元素可以实现相同的效果（如在所提供的示例中）

将高度设置为父元素的100％

1 个答案: