html - 重新定位相关子 div 时调整父 div 的高度-6ren

html - 重新定位相关子 div 时调整父 div 的高度

转载作者：太空宇宙更新时间：2023-11-04 06:14:57

请看this fiddle .

我想在这里实现的是让父div(黄色容器)根据其内容调整其高度。

它的一个子 div(蓝色容器)位于 position: relative 并重新定位到 bottom: 30px;。

但是，通过这种设置，父div似乎没有调整，并且在子div下方仍然有一个空间。

最佳答案

使蓝色 div 相对。并将 margin-bottom: -30px; 添加到蓝色 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>

关于html - 重新定位相关子 div 时调整父 div 的高度，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/56068909/