页面容器超出视口底部与右侧：如何实现5px边距且页面无溢出？

我想要搭建这样的页面：让部分独立div可滚动，同时页面本身无overflow。之前多次实现但都依赖大量临时方案，只知其然不知其所以然。现在的问题是页面底部和右侧超出视口，试了多种方案要么无效，要么破坏原有布局。

核心问题：如何搭建当前及后续页面，使其始终处于视口内且边框边距为5px？（5px为任意取值，我注意到页面顶部边距比其他部分略窄）

HTML #

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Page Title</title>
    <link rel="stylesheet" href="./styles.css" />
</head>

<body>
    <div class="container">
        <header>
            <h1>Title</h1>
            <p>Subtitle</p>
        </header>
        <main>
            <p>Some text for main content area.</p>
        </main>
    </div>
</body>

</html>

CSS #

html, body {
    height: 100%;
    width: 100%;
    margin: 0;
    overflow: hidden;
}

.container {
    height: 100%;
    width: 100%;
    margin: 5px;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr 1fr;
    border: 1px solid #000;
}

header {
    border-bottom: 1px solid black;
}

核心原理 #

问题根源是默认box-sizing: content-box下，元素的width:100%仅计算内容区域，加上margin/border会额外占用空间，导致整体超出视口。通过以下调整彻底解决：

1. 全局统一盒模型：让所有元素的border、padding都包含在宽高计算内，避免尺寸溢出。
2. 用body的padding替代container的margin：将边距设置在body上，同时让body占满视口，保证四边边距一致且不会溢出。
3. 实现局部滚动：给需要滚动的区域设置overflow:auto，内容超出时自动显示滚动条，页面整体保持无overflow。

修改后的CSS代码 #

/* 全局盒模型设置，避免尺寸溢出 */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html, body {
    height: 100vh; /* 用视口单位确保占满整个视口高度 */
    width: 100vw; /* 占满整个视口宽度 */
    overflow: hidden;
    padding: 5px; /* 留出5px边距，替代container的margin */
}

.container {
    height: 100%;
    width: 100%;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr 1fr;
    border: 1px solid #000;
}

header {
    border-bottom: 1px solid black;
}

/* 给main添加滚动功能 */
main {
    overflow: auto;
}

额外说明 #

• 用100vh/100vw替代100%，确保body始终适配当前视口尺寸，不会出现偏差。
• 全局重置margin和padding，消除浏览器默认样式干扰，让布局完全可控。

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