如何让带overflow属性的内部div拉伸至全屏高度且适配内容高度

解决方案 #

你只需要修改.contentcolumn的高度属性即可满足所有需求：
把原代码中.contentcolumn的height: 100%替换为min-height: 100%，其他代码保持不变。

修改后的.contentcolumn规则如下：

.contentcolumn {
  width: 100%;
  max-width: 300px;
  margin: auto;
  /* 把height改成min-height即可 */
  min-height: 100%;
}

原理说明 #

• height: 100%会强制容器高度严格等于父容器的视口高度，内容超出时容器不会自动延伸，所以背景只能覆盖视口高度范围
• min-height: 100%表示容器最低高度等于父容器的视口高度，内容不足时也能铺满全屏，内容超出时会自动跟随内容延伸，背景也会同步覆盖全部内容区域
• 原有的overflow-y: auto属性可以完全保留，不影响滚动逻辑，同时满足大小屏的布局规则

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