After a lot of searching, I came to question this. Due to very large code, it was becoming headache to identify which part of the page was causing overflow. I then used:
html, body{
overflow-x:hidden;
height:100%;
}
I used another alternative way, which was to create a wrapper div outiside the body tag and then applied the overflow-x:hidden property to it but none of these seem to fix this 'double vertical scroll bar issue'.
Had the same issue, not using the html tag and using just the body solved my problem
body{
overflow-x:hidden;
height:100%;
}
Hey I think the solution, if you are still looking for it, is
html, body{
overflow-x: hidden;
max-width: 100%;
height: auto;
}
instead of writing height:100% that you have specified.
Hope this helps!
Related
My website has some annoying white space on the right side and a horizontal scrollbar. I found help with some css code that got rid of the white space and the horizontal scrollbar. However, this code creates a second vertical scrollbar. So I'm stuck with either one or the other. How can I get rid of both additional scrollbars?
This is the code that eliminated the first problem but created the second problem.
html,
body{
width:100%;
overflow-x:hidden;
}
Hi :) You could try adding a margin: 0 and removing the overflow-x: hidden
Your css would be this:
html,
body{
width:100%;
margin: 0;
}
I hope this will help you.
You should add a screenshots of your website so we can understand better.
Don't overflow though body and HTML, but try with class name or id.
Select proper class name, this code will definitely work:
overflow-x:hidden;
overflow-y:hidden;
margin-right:0;
padding-right:0;
If you can't select the correct class
so I made a website but for some reason no matter what I do, I cannot get any scrollbars to appear when the page is too small. I've been looking for quite some time but can't find a solution. I've tried many things but can't figure it out for the life of me. I suspect it has something to do with overflow but even adjusting that doesn't seem to work. If anybody could help me diagnose this, I'd really appreciate it. I'll go ahead and link the relevant codes below. I know it's probably a simple problem, but I'm about to rip my hair out trying to figure it out. Thank you for any help, I really appreciate it.
Main index page: http://pastebin.com/TkdzdKbG
CSS Style: http://pastebin.com/tMKQtC6v
Apply this CSS
.ibg-bg {
height: 100% !important;
position: absolute;
}
Remove position
.bg {
height: 100%;
/*position: absolute;*/
width: 100%;
z-index: 0;
}
I'm not sure if it's the solution you're looking for but in your "container" div, there's an inline style "overflow:hidden", if you remove that, you can get scrollbars whenever the page is too small.
http://prntscr.com/8pcd0f
I think this is because of overflow property. Try this on your stylesheet,
.container .bg {
overflow:scroll !important;
}
Most of your contents are under div.bg > div.display but the height of the parent node-div.bg- is 100% and its overflow value is set hidden by one of the scripts. (query.interactive_bg.js, I guess)
You can set the height of div.display to 100% and its overflow-y value to scroll to scroll the contents or if you want a horizontal scroll bar as well, change overflow-y to overflow.
Add these line to your style.css file, line 172:
.display{
position: relative;
height: 100%; /* Added */
overflow-y: scroll; /* Added */
}
Recently, after adding more and more information to this page, I have noticed that its not possible to scroll, it just cuts off depending on the browser resolution.
Any help would be dearly appreciated.
Adding overflow:auto; to both body and #recentchanges should fix it. However, the real problem is that jQuery is adding these attributes, which suggests you should look at your CSS code and figure out the root of the problem. It seems you copy-pasted some code, so you might want to go through the file jquery.mobile-1.3.1.min.css and remove instances of overflow:hidden from there.
.ui-mobile-viewport-transitioning,.ui-mobile-viewport-transitioning .ui-page {
width:100%;
height:100%;
overflow:hidden; <= THIS IS THE CAUSE.
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
box-sizing:border-box;
}
remove
.ui-mobile-viewport-transitioning, .ui-mobile-viewport-transitioning .ui-page {
box-sizing: border-box;
overflow: hidden;/*remove*/
width: 100%;
}
from js library
or adding
overflow:auto to body
To add scroll to page use overflow-x:scroll for bottom scroll and overflow-y:scroll for vertical scroll and overflow:scroll for both
i am currently making a website but i have a horizontal scroll bar... here is the CSS for the body/html
body,html {
min-width:600px;
height:100%;
margin:0;
padding:0;
font-family:Calibri;
}
here is a fiddle: http://jsfiddle.net/charliejsford/8DSBY/
how can i get rid of the horizontal scrollbar even when the screen size is changed?
You should remove the width property from your footer css.
Overflow will mask the problem but doesn't address the root issue with the layout.
You can use the following in your CSS body tag:
overflow-y: scroll;
overflow-x: hidden;
That will remove your scrollbar.
width:auto; can solve your doubt?
Try removing width:100% from your CSS
I am building out a page. I noticed that when I resize the browser to see how it looks in a smaller window, the horizontal scroll bar doesn't show up.
This is the only css code I have for the body:
body {
font-family:Helvetica, Arial, sans-serif;
margin:0;
background-image:url(img/paper-footerbg.png);
background-attachment:scroll;
background-repeat:repeat-x repeat-y;
}
Here is a link to the page I am building out, http://taghomecaremarketing.com/test/theadamgroup/
Any help is appreciated. Thanks.
In your css for container div's, remove overflow: hidden
#headerBox, #mainBox, #subBox, #footerBox
Surely, you will encounter some other problems, but that's the answer ...
Or add overflow:auto. or overflow:auto!important;
If that does work and brings up a scroll on the x and y axis. Then best to try overflow-x:auto;
Good luck!
You've set it to overflow: hidden! This hides the content. Change it to overflow: auto, or better still, delete it!