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
Related
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!
So I am working on a site and I having an issue. The scrollbar seems to extend passed the window. I cant see the bottom arrow even with max res. It is even worse when I resize the window. The main problem with this is that I can see my footer, but for some users with smaller screen resolutions cant. Here is my css:
body {
display:block;
margin:0;
color:black;
width:100%;
height:100%;
overflow:scroll; }
Here are screens of what I am talking about:
full res: fullres
Resized window: resized
Any help is appreciated.
remove the overflow:scroll; from your body and put it on the specific div where you want the scroll to be
So your body css
body
{
display:block;
margin:0;
color:black;
width:100%;
height:100%;
}
Are you using any position absolute or fixed in your code ? i dont see it as a problem just this short code. I would prefer "auto" over "scroll" for overflow property.
I have used overflow-x:hidden to hide my horizontal scroll bar. Its working well but I'm not able to see my horizontal scroll bar, but still it exposes the overflow when I select-and-drag towards the right side.
I need to avoid this. Can some body help me out in fixing it?
html
{
overflow-x: hidden;
height:100%;
position:absolute;
margin:0;
padding:0;
}
change overflow-x:hidden to overflow:hiddden
https://jsfiddle.net/L6tde8x8/
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
On a webpage I have a wide image, which should take up the right 50% of the screen. It appears as I want it to, but it produces an unwanted horizontal scroll bar. I don't want the image to scale down, I want it to remain looking exactly as it does, but to not produce a horizontal scroll bar. How could I do this?
HTML:
<div class="image">
</div>
CSS:
.image {
position:absolute;
left:50%;
background-image: url('Images/banneriPhone.png');
width:774px;
height:759px;
}
EDIT: I had some suggestions that i remove the overflow option. This didn't work, so i changed the code around (put the image in the html) but this still didn't work. Here's the CSSDesk link:
http://cssdesk.com/mqZpC
Use this in your CSS to hide the scrollbar of the CSS class image:
.image {
position:absolute;
left:50%;
background-image: url('Images/banneriPhone.png');
width:774px;
height:759px;
overflow-x:hidden;
overflow-y:hidden;
}
overflow-x will hide the horizontal scrollbar
overflow-y will hide the vertical scrollbar
Edit: Here you can see some example of the overflow property: http://www.brunildo.org/test/Overflowxy2.html
To remove the scrollbar on the image, I did the following and it worked. Add the below to your class where the image is on CSS:
overflow:hidden;
Apply the following css rules on the element:
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
And set your margins:
margin:0;
The paddings can be left intact because of the box-sizing rules (the padding is not included in the width of the image, which is probably set to 100%).