0

I need a horizontal scrollbar to show on my website when I make the browser window smaller. When I put {overflow-x:auto;} I get a scrollbar instantly even when browser is maximized, and I get like 100 pixels of blank space of my body on the right side.

body {
    padding: 0;
    margin: 0;
}
    .container {
        font-size: 0;
        height: 100%;
        width: 100%;
        position: fixed;
        top: 0px;
        bottom: 0;
        overflow-y: scroll;
        overflow-x: hidden;
    }
Peter Mortensen
  • 30,738
  • 21
  • 105
  • 131
Luka Sh
  • 340
  • 7
  • 11

2 Answers2

0

Try to use this

body {
 padding:0;
 margin:0;
 }
 .container {
 font-size: 0;
 height: 100%;
 width: 100%;
 position: fixed;
 top: 0px;
 bottom: 0;
 overflow-y:scroll;
 margin-right: -10px;
 overflow-x:hidden;
 } `

If you still face any issue. Can you please share fiddle link where I can check and provide you more accurate solution.

Aman Chhabra
  • 3,824
  • 1
  • 23
  • 39
  • Hello. I tried but nothing happened. here you go https://jsfiddle.net/zwehsvz0/ i'm not sure how much you can actually see on jsfiddle but there it is. www.jelenaskolajezika.com is my website – Luka Sh Mar 06 '15 at 23:38
  • I just checked your website but I am not able to find any whitespace. Will it be possible for you to share some kind of screenshot. – Aman Chhabra Mar 06 '15 at 23:42
  • Ok. Here it is. http://postimg.org/image/5zgqx938v/ You were unable to find blank space because overflow-x was set to hidden. On thin screenshot overflow-x is set to auto. – Luka Sh Mar 06 '15 at 23:59
  • Yes, after changing the screen resolution. I am able to replicate the issue. But I am able to fix it using overflow-x: hidden !important; Please check and let me know if you still face any issue. – Aman Chhabra Mar 07 '15 at 00:03
  • Well did that, but still i get no horizontal scrollbar when i minimize browser. Take a look http://postimg.org/image/uokl4yd73/ You should be able to see that i have no horizontal scroll bar :( – Luka Sh Mar 07 '15 at 00:10
  • Coo! I further investigated and found that this line is causing the issue media="screen" .ft { If you will remove width : 100% from this style and also remove overflow-x:hidden what suggested by me earlier, it will work fine now :) – Aman Chhabra Mar 07 '15 at 00:22
  • Solved! I just added overflow:hidden to some div's that were affecting my problem. – Luka Sh Mar 07 '15 at 04:04
0

If you want to show the scrollbars only when needed, then you need to use overflow:auto, for more reference please have look here.

The structure of the page is quite messy so I won't go into fixing the structure, but will provide the answer how I got the horizontal bar to show.

The problem is in the div#navbar child elements. And the way you are using margin and padding properties. For some information how to use them have look here.

The div#ctu element has the margin-left property active which expands the element outside its inherited sizes.

#ctu{
    margin-left:20px --> padding-left:20px;
}
#ft{
    position:absolute; ---> position:relative;
    padding-left:10px --> padding-left:0px;
}
.container{
     overflow-y: scroll;  ---> overflow-y:auto;
     overflow-x: hidden !important; overflow-y:auto;
  //OR
  overflow:auto;
}
Community
  • 1
  • 1
ztadic91
  • 2,774
  • 1
  • 15
  • 21
  • You have point when saying that structure is messy, but this is my first site ever. So have mercy on me. And i managed to decrease the size of blank space, probably there is something more that causes it. But you gave me idea where to look for fixing it. I will reply what i have done. Thanks – Luka Sh Mar 07 '15 at 01:52
  • Solved! I just added overflow:hidden to some div's that were affecting my problem. – Luka Sh Mar 07 '15 at 03:46