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％？那有什么价值？它始终是父母的价值。在这种情况下.parent。

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

什么是零的50％？

得到它？好。

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

Answer 2

它不起作用，因为父母没有任何身高。

你不能拿25％的汽车，但你可以拿掉25％的700px。父高度应为px，以便能够使子高度为％。

编辑：

现在您已将高度100％添加到父级，这看起来很奇怪，因为它需要100％的代码段容器。

Answer 3

您是否尝试将.parent的宽度设置为固定大小，例如500px的？这样，您可以根据宽度将高度设为百分比。确实需要一些固定的属性来减少百分比。这对宽度％的作用相同，因此如果设置固定高度，则可以在宽度上使用％

Answer 4

我不太了解你想要什么，但我看到你需要在你的CSS代码上添加一些修复来显示 .parent 背景，因为你是在 .child 上使用 float：left 。也许这可以解决你的问题。这是修复代码：

.parent:after{
  visibility: hidden;
  display: block;
  font-size: 0;
  content: " ";
  clear: both !important;
  height: 0;
}

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

4 个答案: