为没有滚动条的 100% 高度网格设置边距或填充

Question

我有一个网格布局。我想在它周围添加一个 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>

Answer 1

选择器 .container.withMargin:

使用 padding 而不是 margin

.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>

为没有滚动条的 100% 高度网格设置边距或填充

setting a margin or padding for a 100% height grid without scrollbars

html

css

grid