设置position:absolute后页面元素高度异常、无法修改的问题求助

将页面header（#top）、footer（#feet）和main（#booty）的position从relative改为absolute后，出现高度异常，且无论设置多少%的height值都无法生效，此前页面大部分元素已设置为absolute定位。

问题根源 #

1. 百分比高度依赖链断裂：绝对定位元素的百分比高度需要父元素具备明确的非auto高度值。当前核心容器.all设置了height:110%，但它的父元素html和body默认高度为auto，导致.all的百分比高度无法计算，内部绝对定位元素的%高度自然失效。
2. 过度滥用绝对定位：几乎所有元素都设置为position:absolute，完全脱离文档流，容器无法根据内容自动计算高度，同时元素间依赖margin定位，极易出现重叠、高度塌陷问题。
3. CSS语法错误：例如.sidebar的height:100%后缺少分号，margin-left: none是无效值（应为margin-left: 0），这些错误会导致样式解析异常。
4. 定位方式不合理：用margin-top/margin-left定位绝对元素，不如top/left属性可靠，且容易和父元素的margin规则冲突（代码中大量使用!important强行覆盖，反而加剧布局混乱）。

修复步骤 #

1. 补全高度依赖链 #

给html和body设置100%高度，确保.all的百分比高度能正确计算：

html, body {
  height: 100%;
  margin: 0;
  padding: 0;
  background-image:url(Backgrounds/roses.gif);
  font-family: "Courier New", monospace;
}

2. 保留核心容器的相对定位 #

.all作为所有元素的父容器，必须保持position:relative，这样内部绝对定位元素才会以它为参考定位：

.all {
  margin-left: 25%;
  margin-right: 25%;
  margin-top: 2%;
  height: 100%; /* 改为100%，避免超出视口 */
  position: relative;
  /* 移除无效的flex属性，子元素均为绝对定位，flex布局不生效 */
}

3. 修复CSS语法错误 #

修正.sidebar的语法问题：

.sidebar {
  border: 4px red solid;
  animation: mymove 5s infinite; 
  background-color: black;
  height: 100%; /* 补充分号 */
  float: left;
  margin-left: 0; /* 替换无效的none */
  margin-right: 82%!important;
  overflow: hidden;
  margin-top: 12.5%;
  position: absolute;
  left: 0;
  top: 0;
  padding: 5px;
  padding-top: 20px!important;
  /* 移除无效的flex属性 */
}

4. 用top/left替代margin定位绝对元素 #

以#booty和#feet为例，改用top/left属性定位，同时确保高度计算有效：

#booty {
  background-image:url(https://64.media.tumblr.com/6382d38a81b616031c469d56a09d88b4/7faacc6c2b3eb254-76/s500x750/fe9ff85c4a3590a3701990dd6182b40706df862e.gifv);
  color: white; 
  font-size:20px;
  border: 4px red solid;
  padding: 25px 5px; /* 合并padding规则，避免重复设置 */
  width: 60%; 
  height: 70%; /* 基于父容器.all的高度计算 */
  position: absolute;
  top: 12.5%; /* 替换margin-top */
  left: 20%; /* 替换margin-left */
  animation: mymove 5s infinite; 
}

#feet {
  background-image:url(Backgrounds/rouge.JPG);
  color: white; 
  font-size: 20px;
  border: 4px red solid;
  padding: 5px; 
  width: 60%; 
  height: 10%;
  position: absolute;
  top: 85%; /* 替换margin-top */
  left: 20%; /* 替换margin-left */
  animation: mymove 5s infinite; 
}

5. 减少不必要的绝对定位 #

侧边栏、右侧栏等元素如果不需要脱离文档流，可考虑用float或flex布局，避免全页面绝对定位导致的布局失控。

关键总结 #

• 绝对定位元素的百分比高度必须依赖父级的明确高度，从html→body→父容器的高度链不能断裂。
• 绝对定位是局部布局调整工具，不要全页面滥用，否则会彻底脱离文档流，导致容器高度塌陷、元素重叠。
• 定位绝对元素优先使用top/left/right/bottom属性，避免用margin引发规则冲突。

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