Using height:102%; margin-bottom:1px; to stop shifting causes new problems

HTML & CSS
1

Hi, I used a CSS trick to stop my page from shifting.

html {
	height:102%;
        margin-bottom:1px;
}

The only problem is that now I have a constant vertical scroll bar. See my test site here: http://saraholt.com/dg/index.php It also happens on the Performing Live page.

If I remove that code or change the height to 100%, my whole layout starts to shift slightly on some longer pages if the window is made smaller than the width of the main div.

Any ideas on how to fix these issues without causing more problems?

2

Hi sparkler. Welcome to the forums. :slight_smile:

That’s standard browser behavior, so I wouldn’t worry about it. But if you really want to do this, try the 100% tall page method detailed here:

3

The only problem is that now I have a constant vertical scroll bar…

If I remove that code or change the height to 100%, my whole layout starts to shift slightly on some longer pages if the window is made smaller than the width of the main div.

Keeping the scrollbox present at all times is the only way to keep the page from shifting. The page shifts when the scrollbox is introduced on long pages or a browser resize event that causes content to exceed 100% height.

Any ideas on how to fix these issues without causing more problems?

The cleanest way to do this is to just set the html as overflow-y:scroll
Then if the content exceeds 100% height the scroller will appear in the already present scrollbox.


html {
    height:100%;
    overflow-y:scroll; /*keep scrollbox present at all times*/
}
4

Ah! Rayzur, that seems to have worked! Thank you!

5

Glad you found it helpful. :slight_smile: