HTML/CSS如何实现蓝色背景上叠加宽度更窄的白色背景效果

原有代码问题 #

• 样式分散写在div内部，且全局设置div样式会污染所有div元素，不符合前端编码规范
• HTML结构错误，两个div平级无法实现蓝色背景在白色容器下方的叠加效果，白色容器应该作为body的子元素
• 未给白色容器设置水平居中，无法保证两侧均等露出蓝色背景
• 仅给body设置height:100%不生效，需要同时给html根元素设置高度属性才能撑满视口

可直接运行的实现代码 #

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>蓝底白容器示例</title>
    <style>
        /* 重置浏览器默认边距 */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        /* 根元素设置高度撑满整个视口 */
        html, body {
            height: 100%;
            width: 100%;
        }
        /* 底层蓝色背景直接设置在body上 */
        body {
            background-color: #3b60af;
        }
        /* 上层白色容器样式 */
        .main-container {
            width: 980px;
            min-height: 100%;
            background-color: #fff;
            /* 水平居中实现两侧露出蓝色背景 */
            margin: 0 auto;
            /* 可选：添加内边距避免内容贴边 */
            padding: 24px;
        }
    </style>
</head>
<body>
    <div class="main-container">
        <!-- 所有页面内容放在这个容器内即可 -->
    </div>
</body>
</html>

实现说明 #

• 直接用body的背景作为底层蓝色背景，不需要额外新增div承载
• 白色容器通过margin: 0 auto实现水平居中，左右自动计算的外边距区域会直接透出body的蓝色背景
• 用min-height: 100%代替固定高度，保证内容超出视口高度时白色容器可以自动撑开，不会出现背景截断

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