如果我将上部橙色框（id =“here”的div）的高度从100px更改为100％，则框会消失。我不明白为什么？
<!DOCTYPE html>
<html lang="de" style="width: 100%; height: 100%; margin: 0; padding: 0;">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</head>
<body style="width: 100%; height: 100%; margin: 0; padding: 0;">
<div style="width: 100%; height: 10%; display: inline-block; border: solid black 1px">
<center>
<div id="here" style="width: 50%; height: 100px; border-top-left-radius: 30%; border-bottom-right-radius: 30%; background-color: orange;">
</div>
</center>
</div>
<div style="width:80%; height:70%; margin-left: 10%; background: #FFFFB8; display: inline-block;">
</div>
<center>
<div style="width: 50%; height: 100px; border-top-left-radius: 30%; border-bottom-right-radius: 30%; background-color: orange;">
</div>
</center>
</body>
</html>id为“here”的div包含在一个中心元素中。该元素的高度为0，除非你给它一个，所以给该元素的高度为100％：
<center style="height: 100%;">
<div id="here" style="width: 50%;height: 100%;border-top-left-radius: 30%;border-bottom-right-radius: 30%;background-color: orange;height: 100%;">
</div>
</center>
如果你想把你的div居中，不要使用中心元素，删除它们，而是添加到目标div样式“margin：0 auto;” - 那么你的div＃here将具有他的目标高度，你的代码将更加正确。