为没有滚动条的 100% 高度网格设置边距或填充 [重复]答案

【问题标题】：setting a margin or padding for a 100% height grid without scrollbars [duplicate]为没有滚动条的 100% 高度网格设置边距或填充 [重复]
【发布时间】：2021-08-30 21:05:17
【问题描述】：

我有一个网格布局。我想在它周围添加一个 5px 的边距，但这样做会添加一个滚动条。

是否可以在不添加滚动条的情况下设置边距？

function toggle() {
  document.querySelector(".container").classList.toggle("withMargin");
}

html,
body,
.container {
  height: 100%;
  margin: 0;
}

.container {
  display: grid;
  grid-template-rows: 50px 1fr 1fr;
  grid-template-columns: 300px 1fr 1fr;
  gap: 5px 5px;
  grid-auto-flow: row;
  grid-template-areas: "logo header header" "nav-one main main" "nav-two main main";
  background-color: black;
}

.main {
  grid-area: main;
  background-color: lightcoral;
}

.logo {
  grid-area: logo;
  background-color: lightcyan;
}

.header {
  grid-area: header;
  background-color: lightgoldenrodyellow;
}

.nav-one {
  grid-area: nav-one;
  background-color: lightgray;
}

.nav-two {
  grid-area: nav-two;
  background-color: lightgreen;
}

.container.withMargin {
  margin: 5px;
}

<!DOCTYPE html>
<html>

<head>
</head>

<body>
  <div class="container">
    <div class="main">
      <br /><button onclick="toggle()">toggle .container margin</button>
    </div>
    <div class="logo">logo</div>
    <div class="header">header</div>
    <div class="nav-one">nav one</div>
    <div class="nav-two">nav two</div>
  </div>
</body>

</html>

【问题讨论】：

你能用box-sizing: border-box吗？
我应该在哪里设置？

标签： html css grid

【解决方案1】：

使用padding 代替margin 选择器.container.withMargin：

.container.withMargin {
    padding: 5px;
}

并为.container 选择器添加box-sizing: border-box。

function toggle() {
    document.querySelector(".container").classList.toggle("withMargin");
}

html,
body,
.container {
    height: 100%;
    margin: 0;
}

.container {
    display: grid;
    grid-template-rows: 50px 1fr 1fr;
    grid-template-columns: 300px 1fr 1fr;
    gap: 5px 5px;
    grid-auto-flow: row;
    grid-template-areas: "logo header header" "nav-one main main" "nav-two main main";
    background-color: black;
    box-sizing: border-box;
}

.main {
    grid-area: main;
    background-color: lightcoral;
}

.logo {
    grid-area: logo;
    background-color: lightcyan;
}

.header {
    grid-area: header;
    background-color: lightgoldenrodyellow;
}

.nav-one {
    grid-area: nav-one;
    background-color: lightgray;
}

.nav-two {
    grid-area: nav-two;
    background-color: lightgreen;
}

.container.withMargin {
    padding: 5px;
}

<!DOCTYPE html>
<html>
    <head> </head>
    <body>
        <div class="container">
            <div class="main">
                <br />
                <button onclick="toggle()">toggle .container margin</button>
            </div>
            <div class="logo">logo</div>
            <div class="header">header</div>
            <div class="nav-one">nav one</div>
            <div class="nav-two">nav two</div>
        </div>
    </body>
</html>

【讨论】：

如果我理解border-box 正确，那么这将影响.container 中的所有其他元素。正确的？并不是说这是一个问题——只是想做好准备。
@IMTheNachoMan，我有点错了。您需要为 .container 类添加 box-sizing:border-box。这将是正确的。不，这只会影响类 .container。查看我更新的 CSS 代码和描述。
哦，我看到box-sizing 没有被继承。谢谢！这很好用。
@IMTheNachoMan，很高兴为您提供帮助。