html - 为什么一个div高度的变化是px而不是百分比？

Question

只是练习 div 定位。在此代码中，绿色子 div(左数第四个)，每当我尝试以 % 为单位增加/减少其高度时，都没有任何效果。但是，当我尝试增加/减少其高度(以像素为单位)时，div 会相应地扩展/收缩。这是为什么？我说的是 .child4 { }

html,body {
	margin: 0px;
	height: 100%;
	width: 100%;
	left: 0px;
	top: 0px;	
}

.parent {
	background-color: rgba(0,0,0,1);
	height: 100%;
	width: 100%;
	position: absolute;
}

.child1 {
	background-color: rgba(153,153,153,1);
	height: 200%;
	width: 25%;
	margin-right: 2%;
	margin-left: 0%;
	display: block;
	/* [disabled]margin-bottom: 2%; */
	float: left;
	position: relative;
}

.child2 {
	background-color: rgba(255,0,0,1);
	height: auto;
	width: 25%;
	margin-left: 0%;
	display: block;
	float: left;
	position: relative;
	top: 0%;
	margin-top: 0%;
}

.child3 {
	height: auto;
	width: 25%;
	background-color: rgba(0,0,255,1);
	float: left;
}

.child4 {
	height: 50%;
	width: 20%;
	background-color: rgba(0,255,0,1);
	float: left;
	position: relative;
	top: 0%;
}


----------

<div class="parent">
    <div class="child1">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vehicula quis 
        dolor sed euismod. Fusce id tellus est. Nam eu rutrum urna. Donec mattis a 
        libero faucibus euismod. Suspendisse iaculis placerat sapien in ultrices.
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vehicula quis eeeeeeeeeeeeeeeeeeeeeeeee
    </div>

    <div class="child2">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vehicula quis 
        dolor sed euismod. Fusce id tellus est. Nam eu rutrum urna. Donec mattis a 
        libero faucibus euismod. Suspendisse iaculis placerat sapien in ultrices.
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vehicula quis 
    </div>

    <div class="child3">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vehicula quis 
        dolor sed euismod. Fusce id tellus est. Nam eu rutrum urna. Donec mattis a 
        libero faucibus euismod. Suspendisse iaculis placerat sapien in ultrices.
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vehicula quis
    </div>

    <div class="child4">
        kdkldkldkdkld
    </div>
</div>

Answer 1

您将高度设置为 50%，但 50% 是什么？那是什么值(value)？它始终是 parent 的值(value)。在这种情况下 .parent。

那么.parent的值是多少呢？您将其设置为 auto，这会导致 .parent 的高度值是多少？零。

什么是零的 50%？

明白了吗？好。

因此将 .parent 的高度设置为 300px。然后看看你得到了什么。