Question

如果我的问题与StackOverflow上发布的其他问题类似，我道歉。似乎没有一个类似的问题可以解决我的特殊情况。

我在父div中有两个子div。 Child-div-2具有固定的高度，这定义了父div的高度。

如何将Child-Div-1大小设置为Child-div-2和父div的高度？

这是我创建的JSFiddle来演示这种情况： https://jsfiddle.net/xandercrewz/hb7yvjw0/

我希望橙色容器能够自动调整大小，使其高度与绿色和红色容器相同。

感谢。

<div class='outer-container-blue'>
  <div class='inner-container-left-orange'>
    inner left
  </div>

  <div class='inner-container-right-red'>
    <div class='inner-container-right-green'>

      <div class='inner-container-right-child'>
        inner1
      </div>
      <div class='inner-container-right-child'>
        inner2
      </div>
      <div class='inner-container-right-child'>
        inner3
      </div>

    </div>
  </div>

</div>

CSS：

  .outer-container-blue {
    width: 800px;
    height: auto;
    background-color: blue;
  }
  .inner-container-left-orange {
    display: inline-block;
    float:left;
    width: 15%;
    background-color: orange;

    /* I would like the orange container to be automatically sized so that  */
    /* it's height is the same as the green and red containers.  */
    height: auto;
  }
  .inner-container-right-red {
    position: relative;
    display: inline-block;
    float:left;
    width: calc(100% - 120px);
    height: auto;
    background-color: red;
  }
  .inner-container-right-green {
    position: relative;
    display: inline-block;
    height: auto;
    background-color: green;
    left: 50%;
    transform: translateX(-50%);
    width: auto;
  }
  .inner-container-right-child {
    display: inline-block;
    width: 100px;
    height: 25px;
    margin: 10px;
    background-color: yellow;
    border: 5px solid black;
  }

Answer 1

您可以在外部容器上设置高度（55px适合我）。然后在内部容器上将高度设置为100％。

Answer 2

将以下内容用于.inner-container-left-orange CSS：

.inner-container-left-orange {
    margin-bottom: -99999px;
    padding-bottom: 99999px;
}

overflow: hidden;到

.outer-container-blue

您可以查看Here。

内部div不会扩展到父级的高度

2 个答案: