Overflow x: hidden causes of vertical scrollbar
My problem is that when I define overflow-x:hidden
it creates an unwanted scrollbar.
I am trying to achieve something similar question .
I tried the suggested solution but it didn't work. Below is my code:
CSS and HTML:
.wrapper {
margin-top: 50px;
}
.menu_container {
color: #333;
text-align: center;
padding: 1em;
background: #607D8B;
width: 20%;
height: 30px;
overflow-x: hidden;
}
.submenu {
background: #E0E0E0;
height: 100px;
width: 50px;
}
.menu_list {
width: 300px;
}
<body>
<div class="wrapper">
<div class="menu_container">
<div class="menu_list" align="left">
Menu 1 Menu2 Menu 3
</div>
<div class="submenu">
sub
</div>
</div>
</div>
</body>
Here is a JSFiddle link .
source to share
I see two ways to achieve your goal:
1. Set the .menu_container height to auto
The HTML remains as it is, here's the CSS:
.wrapper {
margin-top: 50px;
}
.menu_container {
color: #333;
text-align: center;
padding: 1em;
background: #607D8B;
width: 20%;
height: auto; /* NEW */
overflow-x:hidden;
}
.submenu {
background: #E0E0E0;
height: 100px;
width: 50px;
display: none; /* I added this to show the effect when .submenu is invoked */
}
.menu_container:hover .submenu {
display: block; /* I added this to show the effect when .submenu is invoked */
}
.menu_list {
width: 300px;
}
Just hover your mouse over .menu_container: FIDDLE
This solution will cause the .menu_container to grow, so the rest of the content will be pushed down when the .submenu is shown.
2. Wrap.submenu in a separate DIV and set it to absolute
With this method .menu_container won't grow, so the next content will stay where it is.
HTML:
<body>
<div class="wrapper">
<div class="submenu_container"> <!-- NEW -->
<div class="menu_container">
<div class="menu_list" align="left">
Menu 1 Menu2 Menu 3
</div>
</div>
<div class="submenu">
sub
</div>
</div>
</div>
</body>
CSS
.wrapper {
margin-top: 50px;
}
.menu_container {
color: #333;
text-align: center;
padding: 1em;
background: #607D8B;
width: 20%;
height: 30px;
overflow: hidden;
}
.submenu_container { /* NEW */
position: relative;
}
.submenu {
background: #E0E0E0;
height: 100px;
width: 50px;
position: absolute; /* NEW */
left: 20px; /* Adjust to your needs */
top: 40px; /* Adjust to your needs */
}
.menu_list {
width: 300px;
}
See FIDDLE
source to share
You can also add html {overflow-y:hidden}
to your CSS or add html {height:100%;}
to remove the y-scrollbar (or at least what I think you want to accomplish).
The addition html {overflow-y:hidden}
will do the same as overflow-x, but it will remove the y scrollbar. This can be useful for what you are trying to accomplish, but its disadvantage is that it hides all content that exceeds 100% of the browser height.
Adding it html {height:100%;}
to your CSS will tell the browser that the web page is exactly 100% of the browser's size. This will move all content inward to fit everything on the page (unless positioning is determined by pixels, not percentages). The downside to this method is that pushing all the content inward can give you different results in different browsers and sizes.
All in all, what I'm saying is that you just keep the scrollbar, it will save you a lot of positioning time and it just shrinks your page.
source to share