如何修复div全屏宽度背景保持宽高比时高度被截断无滚动条问题

根因说明 #

• 通配符选择器强制给所有元素设置height: 100%，叠加body的固定高度限制，导致页面整体高度被锁死为视口高度，内容溢出无法触发滚动条
• 固定定位的.banner设置了height: 100%，占满整个视口遮挡了下方内容
• 背景图容器高度未适配背景图比例，导致background-size: cover属性下背景图被截断

代码修改步骤 #

1. 修改全局通配符样式 #

删除全局强制宽高设置，仅保留内外边距清零，新增盒模型声明方便宽高计算：

* {
  margin:0;
  padding:0;
  box-sizing: border-box;
}

2. 调整body样式 #

把固定高度改成最小视口高度，内容过多时会自动撑开整体页面高度触发滚动条：

.body {
  padding: 0px;
  margin: 0px;    
  min-height: 100vh;
}

3. 调整导航栏banner样式 #

如果是需要顶部固定导航，删除占满视口的高度设置，改为自适应内容高度：

.banner {
    background-color: transparent;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 999;
    background-repeat: no-repeat;
    width: 100%;
    height: auto;
    line-height: 60px; /* 可根据导航实际展示需求调整数值 */
    padding: 0px;
    margin: 0px;
    color: #333955;
    font-size: 23px;
    font-family: "Garisman Studio FreudianTwo";
    text-align: center;
}

4. 调整背景图容器firstdiv样式 #

设置容器宽高比和背景图一致，保证背景图完整展示不被截断，同时新增顶部内边距避免内容被固定导航遮挡：

.firstdiv {
    text-align: center;
    background-image: url("https://dummyimage.com/600x400/000/fff");
    background-repeat: no-repeat; 
    background-size: 100% auto;
    background-position: center top;
    background-color: #F7F3DE;
    color: #2C324D;
    font-family: "Garisman Studio FreudianTwo";
    padding-top: 60px; /* 和导航高度保持一致 */
    aspect-ratio: 3/2; /* 替换为你的实际背景图宽高比，示例图600*400对应3:2 */
}

如需兼容不支持aspect-ratio属性的旧浏览器，可替换为padding实现等比容器：删除aspect-ratio属性，新增padding-top: 66.66%（数值为高/宽*100%，3:2比例对应66.66%），内部内容设置position: relative定位即可。

内容的提问来源于stack exchange，提问作者PIeter Jan Schuurmans