I'm designing a website and I have multiple pages that use the same template, some pages are longer than the browser window's height, other's aren't. The ones that are longer get pushed to he left by about 10px, this might no sound like much but it's noticeable when switching pages as everything jumps sideways.
Is there some CSS thing I can do to make the scroll bar on each page appear over the content rather than pushing it, I have a margin in the template so if the browser window is too small it will just cover the margin when the user scrolls to the far right.
The only way to do this is to have the scrollbar always visible.
html { overflow-y: scroll; }
Give overflow value as overlay. This will avoid the recalculation of layout when scrollbar appears
Overflow: overlay worked for me. Would've commented on jintoppy's post but I'm a nooob
Related
I'm building a full-page web app and it works beautifully in chrome, but in safari mobile it goes wonky. This is because safari mobile has the navigation bar on top and another bar on the bottom. How can I make my page account for them? I've been researching this for weeks and have tried every suggestion. I'm hoping someone here can help.
How do you get the height with and without the top and bottom bars? In truth, I don't really want either bar, but as far as I know there isn't a way to get rid of them except for the user to add the app to their home screen. If my user doesn't have it added to their front page yet, I have to account for the height of the bars. The reason I have to account for them is my page has a map, which must have a fixed height in order to show, it can't be flex. I also have buttons and user controls on both the top and the bottom of the screen, which must always be visible.
What is happening now is that sometimes the content jumps UNDER the navigation bar and therefore those controls become unusable.
I want to set the page height to be the height BETWEEN the nav bar, and status bar, if they are showing, the AVAILABLE screen height. Looking for either a css or javascript solution.
Can anybody help?
Testing with ios 11.2.6.
This whole thing absolutely stinks. I don't really have a solution - don't think anyone does - but here's what I know about it.
CSS 100vh is the maximum height Safari's viewport can be, i.e. with bars hidden. So if the bars are showing, it's too big and things might go under the bars like you're seeing.
CSS position: fixed; top: 0; bottom: 0 fits to the current size of the viewport without bars and will change when the bars show and hide, so it's a lot more useful. But you can't make everything position: fixed.
window.innerHeight is the same as 100vh so that's not much good.
So the only way I know to get the correct height from JS is to make a position: fixed; top: 0; bottom: 0 element and measure it. Then you can apply that height back to other elements to make them fit on the screen, oh, but the height will change when the bars show or hide. Heck.
Sometimes it's best to go nuclear and put the whole site in a position:fixed div, and overflow: hidden on the body, so that the document never scrolls and the bars never hide.
If the body is overflow: hidden, document.documentElement.clientHeight also gets the height without bars.
The boys at Safari HQ say this is all by design and they intend to keep it this way, and Chrome will be implementing it soon too. What a mess.
I have a page with tabs that can display various height content, some of which require a scrollbar and some that don't. The visual effect of changing between these contents is kinda annoying though since when the window scrollbar pops into existence, it shifts the whole page left by just a little.
Things I've tried/considered:
always having scrollbar visible - it works but I don't like it.
setting the body width to 98% - apparently thats still 98% of the window which gets resized so still popping. Setting it to a pixel value works but people have different size screens.
compensating the window width loss with a script - was a fairly simple script but funny enough, the window resize triggered by scrollbar appearing doesn't trigger the resize event of the window and I havent found any other suitable event to attach it to.
Does anybody know a good technique for keeping the page container in place?
I guess you could add a class with margin/padding to the body and then remove it with jQuery. The downside of doing this is that different browsers have different width of the scrollbar and for instance safari on mac don't even have a visible scrollbar. So recommendation would be to just have the scrollbar visible all the time.
The correct answer is
html { width: 100vw; }
Im working on a Website and everything is ok, except my webside is "shaking". (I'm using chrome)
The margin of my main Container is changing on some sides and i have no idea why. They have the same html code, it must have something to do with the content in the main div-container
My Website: www.anitalernt.de
http://www.anitalernt.de/about-us.html is a bit more to the left and http://www.anitalernt.de/index.html after getting a task (just click some buttons) also.
Has someone a idea?
Always display the scrollbar
html {
overflow-y: scroll;
}
See:
Always show browser scrollbar to prevent page jumping
How to always show the vertical scrollbar in a browser?
You could add
html{ overflow-y: scroll;}
to your css.
Places a permanent (but sometimes empty) scroll bar on the window
The issue is most likely caused by the scrollbar appearing, which reduces the viewable area of the browser window and may adjust the contents accordingly.
There are a couple possible workarounds:
You could extend the length of the adjusted web-page so that the content (post-adjustment) also runs "below the fold"
Alternatively, you could encase everything in an absolute positioned DIV which won't "shake" when the viewable area contracts on the scrollbar's appearance.
Or -- depending on your specific content -- you could disable the scrollbar. Although this last workaround is only advisable in very specific cases.
body{
margin: 0;
}
seems to resolve this without having to add a dummy scrollbar :)
I had the same problem because of jQuery scroll where I was checking the scroll value and using that. I fixed my navigation bar by using addClass and removeClass, adding class was not working because I did not use !important in CSS class.
I have been fighting with this thing for several weeks now. I just can't figure it out.
I'm trying to prevent horizontal scrolling of the body when the menu is open. Here is a complete jsbin:
http://jsbin.com/vopeq/38/edit
Seems like any solution only undoes other things that are working the way I would like them to. So I added the requirements to the jsbin to keep track of which are satisfied with each version.
UPDATE
Maybe it's too good to be true, but I think I have all requirements satisfied, but I still need to check on android devices:
http://jsbin.com/vopeq/61
The thing I learned, that was tripping me up for so long and I didn't realize it, is that overflow: hidden on the <body> element, in Mobile Safari, doesn't do squat! I had to move my styles to prevent scrolling down one level of elements.
And Ed4 pointed me in the right direction. I needed to set overflow: hidden on the parent of the element I'm moving with left: 85% instead of the element itself (I was trying to do it all on the <body>).
So I have a body > .container, on which I do the overflow: hidden and body > .container > .content, which I push over using position: relative and left: 85%.
Your question is more of a design spec than a question, so rather than try to design the whole layout for you, I'll point out why your jsbin doesn't work.
Don't try to set left on body. If body is protruding offscreen, you're not going to be able to reliably stop scrolling.
Instead, keep body stationary with 100% width and height, so it can serve as your visible window boundary. When you want to lock the scrolling, you can set overflow: hidden on body. Handle the slide-over and scrolling menu with separate divs inside body.
So I've been lately working on a project of mine that I'd really like to finish, not only Photoshop wise but also HTML/CSS wise and I've encountered a problem.
This is the website & some help graphics - I would like to make the content inside the white rectangle scrollable, but everything outside the rectangle should stay exactly as it is. I'm going to either use Skrollr or Parallax Scrolling, but I first need to figure out how to make it so the entire website has a fixed height and never stretches, while the subcontent div can be scrolled down and up.
Overflow: auto; does this for you, in a heartbeat.