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

Html – "Visibility: Hidden" Elements causing white space/scrollbar to appear

I have an issue where elements with visibility: hidden; still take up space, even with max-height: 0; set, causing the scrollbar to appear on the right.

JSFiddle example

As you can see in the example, removing the hidden element with the conveniently placed button (reduces) the scrollbar length. In my local workspace this would remove the scrollbar entirely, solving the issue.

Are there any workarounds for this without using display: none;? Since that would invalidate my fade in transition which I would like to keep. Thank you!

Tags:

2

Answers


  1. 0

    Try this example I have tried to solve the problem by using overflow: hidden;

    * {
  margin: 0;
}

    
.hidden {
      max-height: 0;
      overflow: hidden;
    }
    Login or Signup to reply.
  2. 0

    The default margin on the body element is wrapping your 100vh element so you get a scrollbar as the height will exceed 100vh.

    As standard practice when starting a project, it is always advised to include styling which removes default browser styling (called reset.css).

    One way to fix the issue is to remove the body margin, then let flexbox handle your .screen heights.

    body {
    margin: 0;
}

.container {
    display: flex;
    flex-direction: column;
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search