求助：如何将子div容器置于父div容器底部？当前子div吸附页面底部

看起来你的问题主要出在定位规则和Flex布局方向上，我来一步步帮你修正：

问题1：.info-bottom吸附页面底部的原因 #

你给.info-bottom设置了position: absolute，但它的父容器.info-container没有设置position: relative——绝对定位的元素会相对于最近的已定位父元素（即设置了position: relative/absolute/fixed的父级）来定位，如果找不到，就会相对于整个视口，这就是它跑到页面底部的原因。

问题2：添加页眉与页脚之间的内容区 #

我们需要在.info-header和.info-bottom之间新增一个.info-content容器，利用Flex布局的flex:1属性让它自动填充剩余空间，这样内容区就能自适应父容器的高度了。

修改后的完整代码 #

CSS 代码

.info-container {
  display: flex;
  flex-direction: column; /* 改为垂直方向布局，适配页眉-内容-页脚结构 */
  position: relative; /* 添加相对定位，让内部绝对定位元素以它为基准 */
  margin: 0 0 0 auto;
  max-width: 450px;
  max-height: 400px;
  width: 100%;
  height: 100%;
  box-shadow: 0px 0px 38px 0px rgba(0, 0, 0, 0.36);
  background-color: yellow;
}

div.info-header {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%; /* 改为100%，避免超出父容器宽度 */
  background: url('../img/infoheader.png') no-repeat;
  background-position: center center; /* 调整背景定位为居中，更合理 */
  height: 100px;
  box-sizing: border-box;
}

div.info-header h3 {
  font-family: 'SignPanter', sans-serif !important;
  text-decoration: none;
  font-size: 32px;
  color: white;
  font-weight: 200;
  text-shadow: 1px 1px #747474;
  text-align: center;
}

/* 新增内容区样式 */
.info-content {
  flex: 1; /* 自动填充页眉和页脚之间的剩余空间 */
  padding: 15px; /* 可选：添加内边距，让内容不贴边 */
  overflow-y: auto; /* 内容超出时显示滚动条 */
}

div.info-bottom-text:hover {
  color: white;
  text-shadow: 1px 1px #747474;
}

.info-bottom {
  /* 如果用Flex垂直布局，其实可以不用绝对定位，这样更简洁 */
  /* position: absolute;
  bottom: 0px; */
  padding: 10px; /* 可选：添加内边距 */
  width: 100%;
  box-sizing: border-box;
}

HTML 代码

<div class="info-container">
  <div class="info-header">
    <div class="info-header-text">
      <h3>Los Santos International Airport</h3>
    </div>
  </div>
  <!-- 新增内容区 -->
  <div class="info-content">
    这里放你的内容，比如机场介绍、航班信息等等
  </div>
  <div class="info-bottom">
    ss
    <div class="info-bottom-text">
      sss
    </div>
  </div>
</div>

关键修改点说明 #

1. 给.info-container添加flex-direction: column，让子元素垂直排列，这比用绝对定位实现上下布局更符合Flex的设计逻辑；
2. 给.info-container设置position: relative，确保如果后续有需要绝对定位的子元素，会相对于父容器定位；
3. 新增.info-content并设置flex:1，让它自动填充中间空间，同时添加overflow-y: auto避免内容溢出父容器；
4. 调整.info-header的宽度为100%，避免超出父容器的max-width:450px限制；
5. 移除了.info-bottom的绝对定位（如果坚持要用的话，保留也可以，因为父容器已经是relative了），用Flex布局自然让它停在底部，更稳定。

这样修改后，你的布局就能正常工作了：.info-bottom会固定在父容器的底部，中间的内容区也能正常填充空间~

内容的提问来源于stack exchange，提问作者RobDeFlop