Question 192533 in Html Question posted in
Some basic documentation can be found here.

Html – Unwanted horizontal overflow when using padding top

Here is the code:

body {
  margin: 0;
  padding: 0;
}

div {
  -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
  -moz-box-sizing: border-box; /* Firefox, other Gecko */
  box-sizing: border-box;
}

.body {
  width: 100vw;
  height: 100vh;
  background-color: black;
  padding-top: 20vh;
}

.content {
  width: 50vw;
  height: 1000px;
  background-color: yellow;
}
<body>
  <div class="body">
    <div class="content">
    </div>
  </div>
</body>

The problem is fairly simple. When I add padding-top to the .body div, there is a horizontal overflow. I would like to know why does the y-axis padding affect the x-axis width.

I know I can get rid of it using overflow-x: hidden, but it’s a dirty solution.

Tags:

4

Answers


  1. 0

    why adding padding to the .body div causes a horizontal overflow is because of the default behavior of the CSS box-sizing property

    You can try this css

    <body>
    <div class="body">
        <div class="content">
        </div>
    </div>
</body>

<style>
    body {
        margin: 0;
        padding: 0;
    }

    div {
        -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
        -moz-box-sizing: border-box;    /* Firefox, other Gecko */
        box-sizing: border-box;
    }

    .body {
        width: 100vw;
        height: 100vh;
        background-color: black;
        padding-top: 20vh;
    }

    .content {
        width: calc(50vw - 20vh); /* Subtracting the padding value from the width */
        height: 1000px;
        background-color: yellow;
    }
</style>
    Login or Signup to reply.
  2. 0

    Just use a percentage value:

    .body {
  width: 100%; /* Percentage-based (full width of <body>) */
}

    More About VW and VH

    Viewport units represent a percentage of the current browser viewport (current browser size). While similar to % units, there is a difference. Viewport units are calculated as a percentage of the browser’s current viewport size. Percentage units on the other hand are calculated as a percentage of the parent element, which may be different than the viewport size.

    Reference: What’s The Difference Between PX, EM, REM, %, VW, and VH?

    body {
  margin: 0;
  padding: 0;
}

div {
  -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
  -moz-box-sizing: border-box; /* Firefox, other Gecko */
  box-sizing: border-box;
}

.body {
  width: 100%; /* Percentage-based (full width of <body>) */
  height: 100vh;
  background-color: black;
  padding-top: 20vh;
}

.content {
  width: 50vw;
  height: 1000px;
  background-color: yellow;
}
    <body>
  <div class="body">
    <div class="content">
    </div>
  </div>
</body>
    Login or Signup to reply.
  3. 0

    The answer to this issue is quite simple & the culprit is y-axis scrollbar.

    Lets first undertands how viewports works . Viewport units looks at the window rather than the content on the page. So when you were trying to render a width of 50vw it actally rendered the viewport not including the scrollbar width in it . The reason you see scrollbar in x-axis is due this reason. In simple words the scrollbar width is not included ( y-axis one ) when calculating the width of the element hence there’s a overflow issue.

    To bypass this behaviour you can use the overflow overlay. Which makes scrollbar floats over the content ( overlays y-axis scrollbar )

          body {
        margin: 0;
        padding: 0;
      }

      div {
        -webkit-box-sizing: border-box; 
        -moz-box-sizing: border-box; 
        box-sizing: border-box;
      }

      .body {
        width: 100vw;
        height: 100vh;
        background-color: black;

        /** the bug fix **/
        overflow: overlay; 
      }

      .content {
        width: 50vw;
        height: 1000px;
        background-color: yellow;
      }

        <div class="body">
      <div class="content"></div>
    </div>

    For understanding overflow overlay checkout this article

    Login or Signup to reply.
  4. 0

    If you’re trying to set up the page with a header (as your comment suggests) then why not use flexbox to guide you, and semantic elements.

    Set the body as a flex column element. Add a header element to that at 20vh, and then add a main element with your content.

    body {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

header {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 20vh;
}

main {
  background-color: black;
  height: 1000px;
}

.content {
  width: 50vw;
  height: 100%;
  background-color: yellow;
}
    <body>
  <header>Header</header>
  <main class="body">
    <section class="content"></section>
  </main>
</body>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search