父级div响应式问题：wrapper边框无法随fixed定位的buttonsDiv延伸

这情况我太熟了——固定定位的.buttonsDiv脱离了文档流，.wrapper根本“看不到”它，所以边框自然就停在内容区域的底部了。结合你页面固定、不能滚动的需求，给你两个实用的解决方案：

方案一：用Padding-bottom撑大Wrapper的底部空间 #

这个方法最直接，通过给.wrapper添加足够的底部内边距，让它的边框能覆盖到按钮栏的下方：

/* 基础样式 */
.wrapper { 
  border: 1px solid black; 
  padding-bottom: calc(50px + 10px); /* 按钮栏高度 + bottom偏移值 */
  box-sizing: border-box; /* 确保padding不会让wrapper超出页面宽度 */
}

.buttonsDiv {
  position: fixed;
  bottom: 10px;
  height: 50px; /* 明确按钮栏高度，方便计算padding */
  width: calc(100% - 20px); /* 可选：和wrapper的左右边距对齐 */
}

body {
  overflow: hidden; /* 禁用页面滚动，符合需求 */
  margin: 0; /* 清除默认边距，避免布局混乱 */
}

原理说明 #

固定定位的元素不占文档流空间，我们手动给.wrapper的底部留出足够空间，让它的边框能延伸到按钮栏下方。calc()用来精准计算需要的内边距，box-sizing: border-box保证内边距不会撑开.wrapper的宽度。

方案二：用伪元素模拟底部边框 #

如果不想修改.wrapper的内边距，可以去掉它原来的底部边框，用固定定位的伪元素来替代：

.wrapper { 
  border: 1px solid black; 
  border-bottom: none; /* 移除原有底部边框 */
  position: relative;
}

/* 用伪元素做延伸的底部边框 */
.wrapper::after {
  content: '';
  position: fixed;
  bottom: 10px; /* 和按钮栏的bottom值保持一致 */
  left: 10px; /* 对应wrapper的左margin/内边距 */
  right: 10px; /* 对应wrapper的右margin/内边距 */
  height: 1px;
  background-color: black;
}

.buttonsDiv {
  position: fixed;
  bottom: 10px;
  width: calc(100% - 20px); /* 和伪元素宽度对齐 */
}

body {
  overflow: hidden;
  margin: 0;
}

原理说明 #

把.wrapper原来的底部边框去掉，用一个固定定位的伪元素来模拟边框，让它刚好对齐按钮栏的底部位置，视觉上就像是.wrapper的边框延伸到了按钮下方。

额外提示 #

• 如果按钮栏的高度不固定，可以用JavaScript动态计算并设置.wrapper的padding-bottom，或者伪元素的位置。
• 要确保.buttonsDiv和.wrapper的宽度一致，避免边框和按钮栏错位。

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