CSS horizontal scroll bar not showing, or there is blank space on the right

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;
    }

---

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.

---

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;
}

链接地址: http://www.djcxy.com/p/29430.html

上一篇: 100％宽度延伸过父元素

下一篇: CSS水平滚动条不显示，或右侧有空白区域