I have a website consisting of a few pages. Some of them have vertical scroll bars and some of them not. The body on the pages without scrollbar is a bit wider than the on the pages with scrollbar (by the scrollbar's width). Is there any way to set exactly the same width on both type of pages? That small difference in width causes some problems such as the some links in the top manue are in a bit different places. The same is with other elements. I would like to avoid it.
You could make the scrollbar visible on all pages.
When the page is short enough, the scrollbar will have no effect:
html {
overflow: -moz-scrollbars-vertical;
overflow-y: scroll;
}
Source of that code: Making the main scrollbar always visible
Related
I have been building my site on Bootstrap for the first time and I'm having a problem that I can't find a solution of this. When I add some content and if its large and big enough to add a scroll bar in browser, whole page content moves towards left.
In simple words, If there is scrollbar, page content is moving to left like 17px and if not, it works okay. I don't want to add a perm scrollbar here like
overflow-y: scroll;
and if I add
width: 100vw;
It works fine and contents stays at its position even with scrollbar but if there is a vertical scroll bar, horizontal scroll appears too for no reason.
You have couple of solutions:
You can show your scroll permanently and style it accordingly to be a part of your page:
html {
overflow-y: scroll;
}
You can add:
padding-right: 40px;
as 40px is what I have heard is the max scroll size that you can get.
Create a parent div that will have all of your contents, then create a child that is slightly smaller, make it the way that changing parent size will not make child size to change.
You can create JS function that will detect if the scroll is displaying on the page, and it would change the margin settings.
You can use media queries to tackle the problem.
I have a header on the top of my web site and links on that. Clicking on the links brings up new pages below.
Some of the pages have a lot of text and others just a small amount. The result is that some pages appear with a scroll bar and others without. It looks very distracting to see the scroll bar appear and then not appear as I move from page to page.
Is there a way I can ensure there is always a vertical scroll bar present?
body {
overflow-y: scroll;
}
Use overflow-y: scroll on whatever element you want to always have a scrollbar
Yes, the CSS rule for this is overflow (also available as -x and -y)
body {
overflow-y: scroll;
}
Other values are for example auto (only when needed, default), hidden and visible.
When making a site that doesn't require scrolling, the content is centred. I have placed all page content within a div : #Pagecontent, which has its margins set to auto so that the width of the screen does not matter - the content is always in the centre.
However, when the page requires scrolling because of the length of the content, all of the content on the page shifts slightly. How can I prevent this, as I find it annoying.
Hope this is an okay question. Cheers!
you can show the overflow all time by css overflow:scroll so the page wont move on the scroll bar
The HTML with overflow: scroll will force the page to always show the scrollbar whether it needs it or not.
html{
overflow:scroll;//for both vertical and horizontal
/* overflow-y: scroll; // for only horizontal
overflow-x: scroll; // for only vertical */
}
But there is no way you can prevent scroll bars appearing on any normal site because it is 100% dependent on the visitors screen resolution and/or preference for a maximised window or not.
The only way to prevent scroll bars shifting your page contents is to disable them via javascript, which may make some of your page unreachable by some visitors
Good read: How to prevent scrollbar from repositioning web page?
I've got a site with 3 pages, one of which has a scrollbar. When switching between a page without and the page with the scrollbar, the navigation bar changes places, and the transition looks terrible. This is because I have a css/div-based layout, and it centers itself on the window. So, since it will only be covering white space, is there a way to make the scrollbar sit on top of the page, instead of shrinking the page to be next to it?
No, you can't place the scrollbar over the page, but you can force it to be shown on all pages, so there will be no jumps:
html {
overflow-y: scroll;
}
I am using a fixed width layout for a website (1000px), with the layout being centered in the screen by auto margins. However, I find that on some pages on the website, the layout is positioned slightly different than other pages for some reason. This is surprising to me, because I use Django and serve the same base template and stylesheet to each page, so I would expect them to look the same.
For example, take a look at http://crh.vkuzo.com/. If you load the "home" and "suggest" pages, the layout stays exactly the same. However, if you load the "about" page, you can see the layout move slightly to the left.
What is causing this slight movement, and how can I get rid of it?
P.S. here is the relevant CSS for the container div (at least what I think is relevant):
#wholepage {
width:1000px;
clear:left;
margin-top:10px;
margin-left:auto;
margin-right:auto;
margin-bottom:10px;
}
It is the browser's scroll bar. See: How to prevent scrollbar from repositioning web page?
Add this style:
body {
...
overflow-y: scroll;
}
For centered pages, you want the scroll-bar to be always visible (even when it's not needed). That way the page won't shift horizontally depending on whether the scroll-bar is visible or not.
The scroll bar is adjusting the layout. When the scroll bar appears on the browser window, it minimizes the width by a certain amount of pixels (the width of the scroll bar itself).