Vertical Scrollbar leads to horizontal scrollbar
I found a solution which is working but far from perfect:
I added a padding-right : 15px to my div, to automatically grow the entire div. Now if the vertical scrollbars appear, they fit within the padding so the horizontal width is still ok.
Regretfully the padding of course also shows up when no vertical scrolling is needed, making my div just a tiny bit wider than it would have to be... :/ Well, in my eyes this is still preferable to unneeded horizontal scrollbars.
Prevent scroll-bar from adding-up to the Width of page on Chrome
You can get the scrollbar size and then apply a margin to the container.
Something like this:
var checkScrollBars = function(){
var b = $('body');
var normalw = 0;
var scrollw = 0;
if(b.prop('scrollHeight')>b.height()){
normalw = window.innerWidth;
scrollw = normalw - b.width();
$('#container').css({marginRight:'-'+scrollw+'px'});
}
}
CSS for remove the h-scrollbar:
body{
overflow-x:hidden;
}
Try to take a look at this:
http://jsfiddle.net/NQAzt/
Prevent 100vw from creating horizontal scroll
Basically the answer is no, if you have a vertical scrollbar there is no way to make 100vw equal the width of the visible viewport. Here are the solutions that I have found for this issue.
warning: I have not tested these solutions for browser support
tl;dr
If you need an element to be 100% width of the visible viewport(viewport minus scrollbar) you will need to set it to 100% of the body. You can't do it with vw units if there is a vertical scrollbar.
1. Set all ancestor elements to position static
If you make sure that all of .box's ancestors are set to position: static; then set .box to width: 100%; so it will be 100% of the body's width. This is not always possible though. Sometimes you need one of the ancestors to be position: absolute; or position: relative;.
Example
2. Move the element outside of non-static ancestors
If you can't set the ancestor elements to position: static; you will need to move .box outside of them. This will allow you to set the element to 100% of the body width.
Example
3. Remove Vertical Scrollbar
If you don't need vertical scrolling you can just remove the vertical scrollbar by setting the <html> element to overflow-y: hidden;.
Example
4. Remove Horizontal Scrollbar
This does not fix the problem, but may be suitable for some situations.
Setting the <html> element to overflow-y: scroll; overflow-x: hidden; will prevent the horizontal scrollbar from appearing, but the 100vw element will still overflow.
Example
Viewport-Percentage Lengths Spec
The viewport-percentage lengths are relative to the size of the
initial containing block. When the height or width of the initial
containing block is changed, they are scaled accordingly. However,
when the value of overflow on the root element is auto, any scroll
bars are assumed not to exist. Note that the initial containing
block’s size is affected by the presence of scrollbars on the
viewport.
It appears that there is a bug because vw units should only include the scrollbar width when overflow is set to auto on the root element. But I've tried setting the root element to overflow: scroll; and it did not change.
Example
width 100% causes horizontal scrollbar
Vertical scrollbars are included in vw units.
So when there's a vertical scrollbar, 100vw is wider than the viewport (without scrollbars).
One suggestion is to change #modalcontainer to width:100% instead of width:100vw.
@keyframes modalAnimation { from { top: 90vh; } to { top: 95vh; background-color: darkcyan; box-shadow: 5px 5px 25px #747474; }}
#headerImage { width: 100vw; height: 100vh; overflow: hidden; position: fixed; padding: 0px; margin: 0px; z-index: -10000000;}
#main-nav>li { width: 9vw; height: 7vh; color: #ffffff; float: right; text-align: center; line-height: 7vh; margin: 0px; font-size: medium; z-index: 100; list-style-type: none; transition: 0.25s;}
#main-nav { background-color: rgba(245, 255, 249, 0.5); width: 50%; height: 7vh; position: fixed; z-index: 100; float: right; transition: all 0.25s;}
/*#main-nav:hover { background-color: rgba(0,129,129,1);} */
#main-nav>li:hover { background-color: rgb(232, 255, 92);}
#wall { background-color: #d2d2d2; width: 50%; height: 100vh; z-index: -10;}
* { margin: 0px; padding: 0px;}
#main-nav>li>a { color: #000; text-decoration: none;}
.modalLayout { opacity: 0;}
.modalLayout:target { position: fixed; background-color: rgba(0, 0, 0, 0.5); width: 100vw; height: 100vh; opacity: 1; transition: all 0.4s; z-index: 200;}
.modal { text-align: center; padding: 6% 1% 1.7% 1%; width: 30vw; height: 20vh; margin: 30vh 35vw; background-color: crimson; position: fixed; transition: all 0.4s; z-index: 10; border-radius: 10px; box-shadow: 2px 2px #484848;}
.closeBtn { font-size: 35px; position: absolute; top: 25vh; right: 33vw; float: right; color: #fff; font-weight: bold; text-decoration: none; z-index: 1000; cursor: pointer; margin-right: 5px; transition: all 0.4s;}
.mainPageButton>div { display: none;}
.mainPageButton:hover>div { display: block; transition: all 0.25s;}
.mainPageButton>div>div { width: 15vw; height: 8vh; background-color: #d2d2d2; color: #000; font-size: medium; float: top; border-bottom: black 1px solid; list-style-type: none; position: relative; line-height: 8vh;}
.mainPageButton>div>div>a { text-decoration: none; color: #fff; font-size: medium; text-align: center; list-style-type: none; background-color: #d2d2d2; padding-right: 2px;}
.mainMenu { position: absolute; top: 88vh; z-index: 0; margin-right: 1vw;}
.mainMenu>div { width: 15vw; height: 10vh; border-bottom: black solid 2px; margin-bottom: 3vh; background-color: white; transition: all .3s; text-align: center; line-height: 10vh;}
.mainMenu>div:hover { width: 17vw; height: 12vh; background-color: #ffcfce;}
.mainMenu>div>a { font-size: x-large; color: #000; cursor: pointer; text-decoration: none;}
.about { width: 20vw; height: 40vh; background-color: #94ffca; border-radius: 5px; position: absolute; top: 88vh; left: 0; float: left; font-size: larger; padding: 1vw; transition: all 0.3s; margin-left: 4px; overflow: auto;}
.about:hover { transform: translate(5px); background-color: rgba(148, 255, 202, 0.5);}
#modalcontainer { background-color: rgba(256, 256, 256, 0.75); top: 80vh; position: absolute; width: 100%; height: 200%; z-index: -10; border-top-left-radius: 50px; border-top-right-radius: 50px;}
#modalswall { width: 50vw; height: 150vh; background-color: #0d213c; position: absolute; top: 85vh; right: 20vw; z-index: -5; border-radius: 8px; box-shadow: 20px 20px 25px grey; filter: opacity(90%);}
.bodyModals { background-color: #acd7ff; top: 90vh; width: 35vw; height: 25vh; right: 28vw; position: relative; z-index: 5; border-radius: 10px; transition: all .5s; margin-bottom: 10vh;}
.bodyModals:hover { -webkit-animation: modalAnimation; -webkit-animation-duration: 3s; -webkit-animation-direction: alternate; -webkit-animation-iteration-count: infinite;}
.bodyModals>p { padding: 1vw; font-size: large;}
#wrapper { margin-bottom: 170vh; position: relative;}
#footer { position: relative; width: 50vw; min-height: 25vh; bottom: 0; background-color: #0d213c;}
#footer>p { font-size: large; text-align: center; color: #fff; padding: 10px 0px;}
html,body { height: 100%; margin: 0; padding: 0;}<ul id="main-nav"> <li class="mainPageButton"> <a href="#mainPageDropdownMenu"> </a> <div> <div> <a href="#"> </a> </div>
<div> <a href="#"> </a> </div> <div> <a href="#"> </a> </div>
<div> <a href=""> </a> </div> </div> </li> <li> <a href="#aboutMe"> </a> </li> <li> <a href="#contactUS"> </a> </li></ul>
<img src="http://ghmahdi.ir/wp-content/uploads/header.jpg" id="headerImage">
<div id="wrapper"> <div id="aboutMe" class="modalLayout"> <div> <a href="#" class="closeBtn"> × </a> </div> <div class="modal"></div> </div>
<div id="contactUS" class="modalLayout"> <div> <a href="#" class="closeBtn"> × </a> </div> <div class="modal"></div> </div>
<div class="mainMenu"> <div> <a href="#aboutModal"></a></div> <div><a href=""></a></div> <div><a href=""></a></div> <div><a href=""></a></div> </div>
<div class="about"></div> <div id="modalswall"></div> <div class="bodyModals"> </div> <div class="bodyModals"></div> <div class="bodyModals"></div> <div id="modalcontainer"> </div></div>
<div id="footer"></div>Rotated div causes horizontal scrollbar in Internet Explorer
Try this
#shortcuts {
position: absolute;
left: 0px;
top: 320px;
transform: rotate(90deg);
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-o-transform: rotate(90deg);
transform-origin: 102%;
display: table;
}
Refer : https://jsfiddle.net/sachinkk/0drcch87/8/
Why does IE display a vertical scrollbar with this 100% height content?
This behavior is caused by inline elements within the <form> - inline elements always render a line-height worth of pixels. Any of the following CSS rules will fix it:
form { font-size: 0; }
or
form * { display: block; }
Alternatively, you could try to get rid of all inline descendants of <form> (this includes text nodes) - but I'm not sure it would actually work (not tested). Plus it would render your markup hard to maintain (you'd need to strip all newlines and such... could be done during deployment, but I think this is taking it too far).
Force vertical scrollbar to display in IE8
Oh figured it. Its
body {
overflow-y: scroll;
}
Two Vertical ScrollBars in IE
Remove:
overflow: auto;
From the body in the CSS.
That should fix it.
Related Topics
Evenly-Spaced Navigation Links That Take Up Entire Width of Ul in CSS3
What Does 14Px/26Px Font Size in CSS Do
Make a Pause During Infinite CSS3 Animation
Crop an Image to Square Using Percentages and Max Widths
How to Set Fill and Stroke Colors and Opacity on Vml Paths Using CSS
Css3 Background-Position Issue with Safari Only
Draw a Line That Doesn't Get Thicker When Image Stretches
Is There a Trick to Show Arial Black in Firefox
Aligning <Li> Next to Each Other, Not Working
How to Make Placeholder and Label Transitions
Convert New Line /N to a Line Break in Angular
CSS Solution to Hide Div After X Amount of Seconds
How to Create a Style Element and Append to Head in React
Polymer Core Transitions for Animated Pages with Core List Content
Background-Image + Rgba() with Fallback in Ie 7-8