Question

我打算在这里实现的目的是使父div（黄色容器）根据其内容调整其高度。

其子div（蓝色容器）之一位于position: relative中，并重新放置在bottom: 30px;上。

但是，使用此设置，父div似乎没有调整，并且在子div下方仍然有一个空格。

Answer 1

使蓝色div相对。并将margin-bottom: -30px;添加到blue div。黄色的div将以蓝色调整。

body {
  height: 100%;
  margin: 0;
}

.header {
  width: 100%;
  line-height: 80px;
}

.main {
  width: 100%;
  display: flex;
  flex-direction: row;
  background-color: yellow;
}

.main-left {
  width: 55%;
  height: 100%;
  background-color: red;
}

    .main-right {
  position: relative;
  bottom: 30px;
  margin-bottom: -30px;
  width: 45%;
  background-color: blue;
}

<body>
  <div class="header">header</div>
  <div class="main">
    <div class="main-left">
      main left
    </div>
    <div class="main-right">
      <p>main</p>
      <p>right</p>
    </div>
  </div>
</body>

重新定位相对子div时调整父div的高度

1 个答案: