0

Page starts with a scrollbar in the opening because there is a little bit of empty space (unintended) in the bottom. Body's height (therefore HTML's height because body's height is 100%) is taller than expected, so overflow-y occurs and scrollbar is being added. What causes this, any idea?

body {
  background: url(pic.png) no-repeat center center fixed !important;
  background-size: cover !important;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-position: 0% 50% !important;
  overflow-y: auto;
  width: 100%;
  height: 100%;
}

.header {
  display: block;
  padding: 8px 15px;
  overflow: hidden;
  min-height: 46px;
  position: absolute;
  width: 100%;
  top: 0;
  z-index: 999;
}

.container {
  display: flex;
  justify-content: center;
  margin-left: auto;
  margin-bottom: auto;
  margin-right: auto;
  margin-top: 10vh;
  flex-wrap: wrap;
}

.topics {
  margin: 10px auto;
  padding: 30px;
  width: 300px;
  min-width: 300px;
  height: 360px;
  display: flex;
  justify-content: center;
  align-items: center;
}
<div class="header">
  <div class="header-left">
    *BUTTONS*
  </div>
  <div class="header-right">
    *BUTTONS*
  </div>
</div>
<div class="container">
  *CONTAINER ITEMS WITH A CLASS NAMED "topics"*
</div>
mplungjan
  • 169,008
  • 28
  • 173
  • 236
duruburak
  • 181
  • 14

2 Answers2

0

try to add this in your every CSS.

html {
    box-sizing: border-box;
}
*, *::before, *::after {
    box-sizing: inherit;
  }
  body {
      font: normal 1em/1.2 'Montserrat', sans-serif;
      margin: 0;
  }
Ravi Dhingra
  • 25
  • 3
0

There were 3 stylesheets linked to this page, 2 of my own and 1 was Bootstrap's. 1 of my 2 stylesheets, there was this code and deleting it solved my problem. It was basically because of setting html's height to 100%.

body, html {
height: 100%;
}
duruburak
  • 181
  • 14