页面底部相对定位Div无高度、margin-bottom失效问题求助

嘿，我懂你的困扰——那个相对定位的父div因为里面全是绝对定位的子元素，直接“塌”得没高度了！毕竟绝对定位元素会脱离正常文档流，父元素根本感知不到它们的存在，自然撑不起高度，margin-bottom也就成了摆设，连html/body的高度都跟着受影响。

给你两个靠谱的解决方案，按需选择：

方案1：用Flexbox替代绝对定位（推荐，语义化更好） #

既然你的两个子元素是左右分栏布局，完全可以用Flexbox来实现，这样父div会自动被内容撑开高度，底部margin也能正常生效，还不用纠结定位的问题。

修改后的代码如下：

<html style="min-height:100%;">
<head></head>
<body style="background: linear-gradient(to bottom, #6699ff -13%, #00ffff 133%) repeat-x;background-attachment:fixed;">
<?php 
print("<br><div></div><div style=\"max-width:50%;margin:20px auto; margin-bottom: 50px; display: flex; justify-content: space-between;\">");
print("<div class=\"usage\">Istruzioni:<br> Some php printing.More php printing. Some php printing.</div>");
print("<div class=\"usage\">Stringa in ingresso: <br> More printing.More printing. </div></div>");
?>
</body>
</html>

• 去掉父div的position:relative，换成display: flex; justify-content: space-between;，让两个子元素自动左右分布
• 直接给父div加margin-bottom: 50px;（数值可自行调整），因为父div现在有实际高度了，这个margin会正常显示
• 子元素去掉position:absolute;top:0;left:0/right:0这些样式，回归正常文档流

方案2：保留绝对定位，修复父div高度塌陷 #

如果你一定要保留绝对定位的布局，可以让父div形成块级格式化上下文（BFC），或者用伪元素来“撑开”高度：

方法A：使用display: flow-root #

这是现代浏览器专门用来解决高度塌陷的属性，简单粗暴：

<div style="position:relative;max-width:50%;margin:20px auto; margin-bottom: 50px; display: flow-root;">

加上display: flow-root;后，父div会包裹住所有绝对定位的子元素，自动获得合适的高度，margin-bottom就能生效了。

方法B：用伪元素撑开（兼容旧浏览器） #

如果需要兼容一些老浏览器，可以给父div加个伪元素：

<style>
.relative-container::after {
    content: "";
    position: absolute;
    bottom: 0;
    height: 0;
    visibility: hidden;
}
</style>

然后给父div添加类relative-container，同时保留父div的position:relative，再加上margin-bottom: 50px;。不过这个方法不如display: flow-root简洁，优先推荐前者。

不管选哪种方法，核心都是让父div能“感知”到子元素的存在，获得实际高度，这样底部的margin才能正常显示，达到你想要的页面底部留白效果。

内容的提问来源于stack exchange，提问作者Z. Alessandro