HTML/CSS入门开发：Instagram首页如何设置无固定px的自适应高度

• 仅注释了.main的固定高度，但子级元素仍存在大量固定高度配置：.feeds设置了height: 660px、.article设置了height: 600px、.main-right设置了height: 900px，这些固定高度会直接限制容器高度，不会随内容自适应。
• 子容器的高度使用了百分比配置：.pic高度65%、.show-box高度15%、.comment高度9%，百分比高度依赖父级的固定高度计算，只要父级固定高度不删，这些子元素高度也不会随内容变化。
• 大量使用position: relative+偏移量（top/left）调整位置：相对定位的偏移只是视觉上移动元素，元素在文档流中的原始占位不会改变，父容器计算高度时仍会按原始位置统计，会出现高度计算和视觉展示不符的问题。
• .main-right使用了position: absolute绝对定位，绝对定位元素完全脱离文档流，父级.main计算高度时不会将该元素的高度纳入统计，所以哪怕右侧栏有内容，main的高度也不会被撑高。
• CSS存在语法错误：. .wrapper .main .feeds .article .identi规则开头多了一个英文句号，会导致该条样式完全失效。
• 注释了全局的box-sizing: border-box规则，此时容器的padding、border会额外叠加到元素的宽高上，会出现实际宽高和预期数值不符的情况。

1. 移除所有不需要的固定高度配置：删除.feeds、.article、.main-right的height属性，同时把.pic、.show-box、.comment的百分比高度替换为具体的最小高度，或者直接由内部内容撑开高度。
2. 调整布局方案，减少position偏移的使用：导航栏用fixed没问题，主体内容的间距用margin、padding实现，不要用top/left偏移，避免文档流占位异常。
3. 右侧栏不要用绝对定位：两栏布局改用flex实现，给.main设置display: flex，左右两栏直接按比例分配宽度，既不脱离文档流，也能方便实现高度自适应。
4. 修复CSS语法错误，删除.identi规则前多余的句号。
5. 开启全局box-sizing: border-box，避免padding、border撑宽撑高容器。

核心代码修改示例 #

* {
  padding: 0;
  margin: 0;
  text-decoration: none;
  list-style: none;
  box-sizing: border-box; /* 开启盒模型规则 */
}

/* 其余通用样式保持不变 */

.wrapper .main {
  position: relative;
  top: 90px;
  width: 100%;
  background-color: yellow;
  display: flex; /* 改用flex实现两栏布局 */
  justify-content: space-between;
  padding: 40px 30px; /* 用padding替代top/right/left偏移 */
}

.wrapper .main .feeds {
  width: 60%;
  background-color: red;
  /* 删除固定height、top/right/left偏移属性 */
}

.wrapper .main .feeds .article {
  display: flex;
  flex-direction: column;
  width: 95%;
  margin: 10px auto; /* 用margin替代偏移 */
  background-color: green;
  /* 删除固定height属性 */
}

/* 修复多余的句号，删除错误的.开头 */
.wrapper .main .feeds .article .identi {
  position: relative;
}

.wrapper .main .feeds .article .pic {
  width: 100%;
  min-height: 390px; /* 用最小高度替代百分比，也可由内部图片自动撑开 */
  background-color: lightblue;
}

.wrapper .main .feeds .article .show-box {
  width: 100%;
  min-height: 90px; /* 可根据内容多少自动调整高度 */
  background-color: lightcoral;
}

.wrapper .main .feeds .article .comment {
  width: 100%;
  min-height: 54px;
  background-color: lightcyan;
}

.wrapper .main .main-right {
  width: 30%;
  background-color: blue;
  /* 删除绝对定位、固定height、top/right偏移属性 */
}

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