100vw causing horizontal overflow, but only if more than one?
As already explained by wf4, the horizontal scroll is present because of the vertical scroll. which you can solve by giving max-width: 100%
.
.box {
width: 100vw;
height: 100vh;
max-width:100%; /* added */
}
Working Fiddle
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
Make body have 100% of the browser height
Try setting the height of the html element to 100% as well.
html,
body {
height: 100%;
}
Body looks to its parent (HTML) for how to scale the dynamic property, so the HTML element needs to have its height set as well.
However the content of body will probably need to change dynamically.
Setting min-height to 100% will accomplish this goal.
html {
height: 100%;
}
body {
min-height: 100%;
}
Why is this div with 100vh height not covering the whole viewport?
Viewport height just means that the height of the element will be a percentage of the viewport. The viewport being the window your viewing the page on. So if it is a 1920x1080 screen the viewport height will be 1080px or whatever your browser window is, it may be less if you have a toolbar at the bottom of your screen. The issue you are having is that if you want the sidebar to follow the main content down the page you need to disregard the viewport and have a wrapper around both of them like so:
.main-wrapper{
display:flex;
}
aside{
background:blue;
color:#fff;
width:200px;
}
main{
background:green;
height:5000px;
flex:1
}
<div class="main-wrapper">
<aside>Your sidebar</aside>
<main>Your Main Content</main>
</div>
Related Topics
What Characters Must Be Escaped in an Http Query String
How to Save the Content in Uiwebview for Faster Loading on Next Launch
Best JSON-Ld Practices: Using Multiple <Script> Elements
Image Label for Input in a Form Not Clickable in Ie11
Why Does CSS Padding Increase Size of Element
Apply CSS Style on All Elements Except with a Specific Id
Valid Content-Type for Xml, HTML and Xhtml Documents
Set Maxlength in HTML Textarea
Change Checkbox Check Image to Custom Image
How to Increase Size of Serial Number in Ol
Why -Webkit-Transform: Translate3D(0, 0, 0) Messes Up with Fixed Childs