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

Question

I've got a grid layout. I want to add a 5px margin all around it but doing so adds a scrollbar.

Is it possible to set a margin without having a scrollbar added?

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>

can you use `box-sizing: border-box`? – bazi Jun 15 '21 at 01:56 — bazi, Jun 15 '21 at 01:56
Where would I set that? – IMTheNachoMan Jun 15 '21 at 01:56 — IMTheNachoMan, Jun 15 '21 at 01:56

s.kuznetsov · Accepted Answer · 2021-06-15T02:33:25.837

Use padding instead of margin for selector .container.withMargin:

.container.withMargin {
    padding: 5px;
}

And add box-sizing: border-box for the .container selector.

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>

If I understand `border-box` right then this will affect every other element inside `.container`. right? Not that this is an issue -- just wanting to be prepared. — IMTheNachoMan, Jun 15 '21 at 02:29
@IMTheNachoMan, I was a little wrong. You need to add box-sizing: border-box for class .container. This will be correct. No, this will only affect class .container. See my updated css code and description. — s.kuznetsov, Jun 15 '21 at 02:35
Oh, I see that `box-sizing` is not inherited. Thanks! This works great. — IMTheNachoMan, Jun 15 '21 at 02:47

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

1 Answers1