Question

我有一个未定义宽度或高度的父div。

第一个孩子＆＃39; a＆＃39;设置了宽度和高度。如何让父母的尺寸尺寸与孩子一样。

＆＃13;

.parent{
    position: fixed;
    background: green;
    padding: 10px;
}

.child-a{
  position:absolute;
  width: 300px;
  height:50px;
  background: red;
}

.child-b{ 
  width:100%;
  height:120%;
  background: blue;
}

＆＃13;

<div class='parent'>
  <div class='child-a'></div>
  <div class='child-b'></div>
</div>

＆＃13;

第二部分：我想要div＆＃39; c＆＃39;成为父母身高的120％，并位于div＆＃39; a＆＃39;后面。所以只有＆＃39; c＆＃39;是可见的。

我尝试了多种解决方案，包括display: table，overflow: overlay等，但没有任何结果可以提供我想要的结果。我正在寻找仅限CSS的解决方案。

Answer 1

json

这个答案仅适用于第二部分，希望它有所帮助：）

Answer 2

要使height百分比起作用，其父级也必须具有高度属性。见https://stackoverflow.com/a/16642908/5599288。因此，父母的身高不能不确定或自动调整大小。

您必须在父级上设置固定高度，然后使用百分比控制子级。这就是我用纯CSS方式做的事情，

https://codepen.io/jacobgoh101/pen/jZrvWw

.parent {
  position: fixed;
  background: green;
  padding: 10px;
  width: 300px;
  height: 50px;
}

.child-a {
  position: absolute;
  background: red;
  // set size, padding 10px and centering
  width: calc(100% - 20px);
  height: calc(100% - 20px);
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.child-b {
  width: 100%;
  height: 120%;
  background: blue;
}

将父级（未定义的宽度和高度）维度设置为等于子级

2 个答案: