Question

为什么当我用百分比设置div元素高度时，元素不会显示？
为什么最大高度从不显示？（无论是百分比还是vh或px）？

例如：

<body> <div></div> </body>

div {width:50%; max-height: 100px; background-color: blue;}. Another Example: div {width: 50%; height:20%; background-color:blue;}

从不出现:(感谢您的帮助。

Answer 1

即使元素具有max-height属性，您仍需要告诉它使用它，因为默认值为auto。因此，如果您希望它消耗所有的高度直到放置的最大高度，请使用：

height: 100%;
max-height: 100px;

Answer 2

这是因为div外部的元素的高度为0。

在您的示例中，body的高度为0，因此0的任何百分比仍为0。

如果您给body（或外部元素）一个高度，它将被看到。

.outerDiv {
  height: 100px;
  border: 1px solid black;
}

.innerDiv {
  height: 50%;
  background-color: lightblue;
}

<div class="outerDiv">
  <div class="innerDiv">
    I'm inside
  </div>
  I'm outside
</div>

块元素的高度和最大高度-元素未显示

2 个答案: