Question

当我为儿童div设置身高/宽度百分比时，我遇到了问题。

父div有属性display: -moz-box。当我删除该属性时它将起作用。

类似的东西：

<div class='parent' style="display: -moz-box;">
  <div class='child' style="height:100%;width:70%">
  </div>
</div>

Answer 1

首先，您需要将width & height of the parent container设置为绝对值（以px为单位）或相对值（以％，vh，vw等为单位）。然后，您可以使用relation to your direct parent element中的子元素的％宽度。

它display:box适用于任何浏览器，但已过时，我看不到任何使用它。您可以使用flexbox作为显示：需要flex，或者如果必须将其显示为块元素，请使用display：block。

<div class='parent' style=" width:100px;height:100px;display:box;">
  <div class='child' style="height:100%;width:70%;background:red;">
  </div>
</div>

<div class='parent' style="width:100%;height:100px;display:box;">
  <div class='child' style="height:100%;width:70%;background:green;">
  </div>
</div>

Answer 2

尝试为child div添加以下css属性：

.child{
  position: absolute;
  margin: auto;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
}

然后，您也可以在height和width中设置%和px。

显示父级div时，百分比高度/宽度属性不起作用：-moz-box;

2 个答案: