网格布局外的边距

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"
    ;
}