- This topic is empty.
Viewing 2 posts - 1 through 2 (of 2 total)
Viewing 2 posts - 1 through 2 (of 2 total)
- The forum ‘CSS’ is closed to new topics and replies.
The forums ran from 2008-2020 and are now closed and viewable here as an archive.
Hey everyone,
I am working on a website, developed by someone. I am stuck on a problem.
Its just a 10/12 pages website with different container heights (auto) on different pages (container is fixed width with auto margin). Problem is that when there is a page with height lesser than browser view port there is no problem but when the page loads with bigger height than the view port, the main container with auto margin move slightly (8px on FireFox – Windows XP) to the left. I have figured out that it is because of vertical scrollbar (which comes when bigger page loads). The problem looks very logical, I have some options on my own, like using min-height or adding bottom margin on main container but this unnecessarily will add scrollbar to other pages.
Does any one encounter this problem before? I will appreciate any help. Looking forward for any CSS fix. Thanks in advance.
Kind regards,
Waqas.
just add the following lines to your css
html {
overflow-y: scroll;
}
this will add a vertical scrollbar to every page (even when none is needed), but will eliminate the inconsistency between your pages.
you can read more about it here: https://css-tricks.com/eliminate-jumps-in-horizontal-centering-by-forcing-a-scroll-bar/