网格布局之外的边距答案

【问题标题】：Margins outside Grid layout网格布局之外的边距
【发布时间】：2018-03-06 19:15:10
【问题描述】：

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

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

【问题讨论】：

同时显示html代码
你也可以试试 box-sizing:border-box，这样可以让任何内边距或边框都不会影响整体宽度
找到了罪魁祸首......我不得不用 window.onload 初始化 owlcarousel

标签： css layout grid margins

【解决方案1】：

使用“box-sizing:border-box”

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

【讨论】：