CSS绝对定位div的margin-bottom不生效：底部留白设置失败求助

嗨，我来帮你搞定这个问题！你遇到的情况是因为绝对定位的参考对象和父元素高度设置的问题，下面是具体的解决方案和原因分析：

第一步：修正父元素的高度和定位上下文 #

首先，绝对定位的元素是相对于最近的非static定位父元素来计算位置的，而且百分比单位依赖于父元素的明确高度。默认情况下，html和body的高度是由内容撑开的，不是视口高度，所以直接设置bottom:50%会因为没有参考高度而失效。我们先给html和body设置正确的样式：

html, body {
  height: 100%; /* 让html和body高度等于浏览器视口高度 */
  margin: 0;
  padding: 0;
  position: relative; /* 让.divcom以body为定位参考 */
}

第二步：调整.divcom的定位样式 #

接下来修改你的.divcom样式，去掉原来的top:100%（这个属性会把元素推到父元素底部的外面，导致你看不到背景色），改用bottom:50%来实现距离页面底部留50%空白的需求：

.divcom {
  background-color: lime;
  border-radius: 5px;
  width: 37.5%;
  position: absolute;
  bottom: 50%; /* 关键：元素底部距离body底部（即页面底部）为视口高度的50% */
  left: 50%;
  transform: translateX(-50%);
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.39), 0 6px 20px 0 rgba(0, 0, 0, 0.39);
  min-height: 50px; /* 可选：如果元素内没有内容，添加最小高度确保能看到背景色 */
}

为什么原来的方法无效？ #

• 你之前设置top:100%会把.divcom定位到父元素（body）的底部外侧，如果body没有设置高度，它的高度仅由内容决定，元素会被推到视口之外，所以看不到背景色。
• margin-bottom:50%对绝对定位元素的效果和普通元素不同，因为绝对定位元素的margin是相对于自身的宽度来计算的，不是父元素的高度，所以达不到你想要的效果。
• 给body设置margin-bottom:50%只会增加body底部的外边距，但不会改变绝对定位元素的参考位置，所以也没用。

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