求助：如何用CSS2.1实现嵌套子div固定于body底部？

没问题，用CSS2.1完全可以实现这个需求！咱们先拆解下你当前代码的问题，再一步步调整到符合预期的效果。

问题根源 #

你的父div设置了固定height:70px且为position:relative，这导致子div的absolute定位完全基于这个70px高的父容器，自然没法跑到body底部。另外你尝试的padding-bottom:100%是利用CSS中padding百分比基于父元素宽度的特性来撑高元素，和“定位到底部”的需求完全不匹配，所以才会觉得这个方案不理想。

CSS2.1解决方案 #

要让子div固定在body底部，同时保留父div的position:relative，核心思路是让父div的高度延伸到body的底部——这样子div相对于父div定位到底部，就等同于相对于body底部了。具体调整如下：

1. 先让html和body占满整个视口高度，清除默认的margin和padding，避免布局偏移：
2. 把父div的固定height:70px改成min-height:70px，同时设置height:100%，确保父div至少保持70px高度，同时会撑满body的高度；
3. 给子div添加bottom:0，让它相对于父div的底部定位，配合right:0就能固定在body底部的右侧。

修改后的完整代码 #

html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}
body { background-color: grey; }
.parent {
  min-height: 70px;
  height: 100%;
  width: 440px;
  left: 200px;
  background-color: blue;
  position: relative;
}
.child {
  display: block;
  position: absolute;
  width: 100px;
  right: 0;
  bottom: 0;
  background-color: yellow;
}

<body>
  <div class="parent">
    <div class="child">Fix to bottom</div>
  </div>
</body>

效果说明 #

调整后，不管浏览器怎么缩放，父div都会跟着body的高度同步变化，子div始终固定在body的底部。如果后续父div内添加了更多内容，min-height:70px会保证父div不会低于70px；当内容超过视口高度时，body会出现滚动条，子div也会跟着body的实际底部移动（而非固定在视口底部），完全符合你“固定于body元素底部”的需求。

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