身高：100％不工作

Question

我尝试创建{{1>}（菜单），屏幕的宽度为20％，高度为100％，但div未显示在屏幕上。我不知道为什么。这是我的代码：

＆＃13;

＆＃13;

div

＆＃13;

#Menu {
    display: inline-block;
    background-color: black;
    min-width: 20%;
    min-height: 100%
}
 
#Bar {
    float: right;
    background-color: blue;
    width: 80%;
    height: 100%;
    margin: 0;
    float: left;
}

＆＃13;

＆＃13;

＆＃13;

Answer 1

由于您的div元素为空，它们将折叠到0高度。在这种情况下，100%的高度无济于事。

如果包含min-height属性，您会发现可以显示元素。

我做了一些修改以使其工作，并进行一些微调。我总是缩进我的真实代码，但是我没有缩进修改，以便你可以更容易地看到它们。

＆＃13;

＆＃13;

#Menu { 
	display:inline-block; 
	background-color : black;
	min-width:20%; 
	min-height:100%;
margin: 0;
min-height:10px;
float: right;
}

#Bar {
	float:right;
	background-color : blue;
	width:80%; 
	height:100%;
	margin:0;
	float:left;
min-height: 10px;
}

＆＃13;

<div id="Menu">
		
</div>
<div id="Bar">
	
</div>

＆＃13;

＆＃13;

＆＃13;