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

Html – vertical scrollbar showing up even when total height is 100%

I have simple HTML/CSS code, that have 3 divs , Header, content and footer.Header and footer are of fixed height(170px) and content is expected to take remaining vertical space. all threes are placed vertically with the help of diplay:flex and content block is forced to take remaining space with flex-grow:1.

The problem is appearance of vertical scrollbar. I am not able to understand why it is happening as according to my understanding, total height will always be [170px + (atmost remaining) + 170px] , that will always be 100%.

Code:

* {
  box-sizing: border-box;
  margin: 0;
}

html,
body {
  height: 100%;
}

.main {
  display: flex;
  flex-direction: column;
  height: 100vh;
}

.header {
  background-color: lightyellow;
  height: 170px;
}

.content {
  background-color: lightpink;
  flex-grow: 1;
}

.footer {
  background-color: lightgreen;
  height: 170px;
}
<div class="main">
  <div class="header">this is header</div>
  <div class="content">
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Debitis,
  </div>
  <div class="footer">This is footer</div>
</div>

Someone help me understand why it is happening,also the correct way to achieve the required result.

I have tried adding overflow:hidden to body , but i don’t think that is best way to do it, as it is clipping the overflow.

Tags:

3

Answers


  1. 0 
    .content {
  background-color: lightpink;
  flex: 1;
  overflow: auto;
}

    have a try

    Login or Signup to reply.
  2. 0

    issue you’re facing with the vertical scrollbar appearing is likely due to the box-sizing: border-box; rule applied globally with the * selector. This rule affects how the height property is calculated for elements.

    Explanation:
    When you set box-sizing: border-box;, the padding and border are included in the element’s height and width. This means that the actual height of the header and footer may exceed 170px if they have any padding or border. If the total height of the header and footer exceeds 340px, the content div will push the total height beyond 100vh, causing the scrollbar to appear.

    Solution:
    To avoid the scrollbar issue, you can ensure that the header, footer, and content divs add up to exactly 100vh.

    * {
     box-sizing: border-box;
     margin: 0;
  }

html, body {
     height: 100%;
}

.main {
    display: flex;
    flex-direction: column;
    height: 100vh;
 }

 .header {
     background-color: lightyellow;
     height: 170px;
     box-sizing: content-box;
 }

 .content {
     background-color: lightpink;
     flex-grow: 1;
 }

 .footer {
      background-color: lightgreen;
      height: 170px;
      box-sizing: content-box;
 }
    Login or Signup to reply.
  3. 0

    Sometimes the browser you are using may have its own unique CSS values. To ensure consistency across all browsers, you might need to use a reset CSS. Alternatively, you can manually set the margin and padding values of all elements to "0".

    And for the .main element, the height is 100vh, with the header and footer together totaling 340px. By performing a calculation, we can obtain a more concrete result:

    100vh – 340px = .content

    * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.content {
    background-color: #e8e8e8;
    height: calc(100vh - 340px);
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search