5

I made my container and body height as 100%. i have navbar outside container. I have to keep it outside of container as they both are of different width. because of this navbar the browser gives a scrollbar, which i dont want. i tried float:left& width:100% for navbar but it made container content to go up. does anyone have solution to remove scrollbarenter image description here

lch
  • 4,569
  • 13
  • 42
  • 75
  • possible answer here [http://stackoverflow.com/questions/3296644/hiding-the-scrollbar-on-an-html-page](http://stackoverflow.com/questions/3296644/hiding-the-scrollbar-on-an-html-page) – bloC Jan 22 '16 at 08:17
  • 1
    have you tried body{overflow:hidden;} if you only want it on that page then give the body a class and then overflow:hidden; – Steve K Jan 22 '16 at 08:19
  • overflow: hidden would effect mobile screens – lch Jan 22 '16 at 08:27
  • Then use a media query to allow overflow in mobile screens @media screen and (min-width: 768px){body{overflow:hidden;}} you can use 768px or higher depending on what you want. – Steve K Jan 22 '16 at 08:30
  • make overflow hidden for outer div and from inner if you need scroll then make it auto – Tanmay Jan 22 '16 at 08:33
  • 1
    Did you ever find a simple solution to this? I feel like this should be built into bootstrap. – RayB Apr 11 '18 at 15:28

2 Answers2

1

I encountered similar problem while creating a navbar with the nav-tabs having seperate forms. What was causing problem for me, was the form-group horizontal class, which has a display:table type that was adding extra padding on the container. What solved the issue for me was adding 18px extra padding to my container.
You should inspect the page and check for the precise element and css that is causing the horizontal scroll. Also share your html and page, with the included css and js for looking more into the issue here.

Bay Max
  • 222
  • 3
  • 13
1

You container height 100% might be what's causing the problem here. You need to account for the height of the navbar otherwise the two will go over the viewport's height.

Maëlig
  • 409
  • 1
  • 4
  • 10