Question

我有一个包含子div的父div。我希望父div自动调整大小，以便子节点始终在父节点的边框内。现在，由于相对定位，子div的底部延伸超出了父节点的底部。如何让父母调整大小？

#parentDiv {
  margin: 40px 0 0 40px;
  background-color: #eae;
  width: 1500px;
  height: auto;
}
#childDiv {
  position: relative;
  max-width: 400px;
  min-height: 200px;
  background-color: #B9D7D9;
  top: 20px;
  left: 20px;
}

<div id="parentDiv">
  <div id="childDiv">
  </div>
</div>

Answer 1

相对定位会在视觉上移动元素，所以如果你想在父元素中包含它，你需要另一种移动子元素的方法。

保证金似乎是最明显的选择

#parentDiv {
  background-color: #eae;
  width: 500px;
  margin: 40px;
  overflow: auto;
}
#childDiv {
  position: relative;
  max-width: 400px;
  min-height: 200px;
  background-color: #B9D7D9;
  margin-top: 20px;
  margin-left: 20px;

<div id="parentDiv">
  <div id="childDiv"></div>
</div>

Answer 2

摆脱了childDiv的定位。概述元素，以便您可以清楚地看到它们。由于有最小和最大尺寸，我将100％的高度和宽度用于显式测量。

＆＃13;

body {
  height: 100vh;
  width: 100vw;
}
#parentDiv {
  margin: 40px 0 0 40px;
  background-color: #eae;
  width: 1500px;
  outline: 2px dashed blue;
}
#childDiv {
  max-width: 400px;
  width: 100%;
  min-height: 200px;
  height: 100%;
  background-color: #B9D7D9;
  outline: 2px solid red;
}

＆＃13;

<div id="parentDiv">
  <div id="childDiv">
  </div>
</div>

＆＃13;

如何让父div调整其高度

2 个答案: