网格布局之外的边距

Question

我在为网格布局添加边距时遇到一些问题。我无法在要占据整个视口的主体或.container中插入边距。当页面可滚动时...垂直滚动条也将强制水平滚动条。

.container {
    height:100vh;
    display: grid;
    grid-template-rows: auto 1fr  auto;
    grid-template-columns: 1fr;
    grid-template-areas: 
        "header"
        "content"
        "footer"
    ;   
}

Answer 1

使用“ 框大小：边框框”.container {

box-sizing: border-box;
height: 100vh;
display: grid;
grid-template-rows: auto 1fr auto;
grid-template-columns: 1fr;
grid-template-areas: 
    "header"
    "content"
    "footer"
;

}