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
Related
This is a Wordpresss site and I believe this is a theme issue that is causing the footer to stick to the top of the page.
I can't figure out a site-wide fix for the issue. I have used:
.l-footer {
position:absolute;
bottom:0;
}
and it just makes the footer disappear entirely.
Try position:relative, position:fixed, and display:block also. Once you have the right one, take a note on how they work and also see the changes that they made.
EDIT:
Try this:
.somefooter {
display:inline-block;
overflow: hidden;
}
Through I think one of them should do it, place them in your footer tag.
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!
I have literally tried EVERYTHING to get this to work. I've read all other stackoverflow EVERYTHING.
I'm trying to get a DIV to go all the way to the bottom of the page. As you can see in the jsfiddle (via the side borders) it does not. it seems to stop at a height of 357px which is not the full height. I then find out that my div is 100% of the body because the body is also 357px even though I also specified that it should be 100%. Nothing is working and I'm not sure why. In my previous project I never had that problem. I just specified a min-height and when I added more content pass that min-height the div accompanied it. But this time it just overflows for some reason.
html, body {background-color:#F6EBBA;height:100%;position:relative;}
#main-body{
display:block;
height:100% !important;
margin-left:16%;
margin-right:30%;
border:1px solid #dead68;
border-top:none;
border-bottom:none;
bottom:0}
http://jsfiddle.net/R96Lc/
My website had much more content but I had to delete js, css which was not needed and changed the html to so that you could see what I am talking about.
Thanks in advance.
LIVE DEMO
You can declare min-height here:
html, body { background-color:#F6EBBA;
min-height:100%;
position:relative;
}
Remove the height declaration from the #main-body selector.
#main-body{
display:block;
margin-left:16%;
margin-right:30%;
border:1px solid #dead68;
border-top:none;
border-bottom:none;
}
Working fiddle: http://jsfiddle.net/EfrainReyes/5tS8y/1/
If you change your height to auto or just don't define a height, it automatically contains all text that's inside the div. Here is a working version. I've also tidied up your code (just clicked the TidyUp button), so that it is readable.
I have just played with the fiddle, changing:
height:100% !important;
To
min-height:100% !important;
Seems to fix the issue
New fiddle: http://jsfiddle.net/R96Lc/2/
you are declaring
bottom 0
but the div is not absolute, you could also dont declare any kind of height.
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!