This question already has answers here:
100vw causing horizontal overflow, but only if more than one?
(8 answers)
Closed 4 months ago.
As mentioned in the title, is it possible to calculate the vw without the scrollbars in css only?
For example, my screen has a width of 1920px. vw returns 1920px, great. But my actual body width is only something like 1903px.
Is there a way for me to retrieve the 1903px value with css only (not only for direct children of the body), or do I absolutely need JavaScript for this?
One way to do this is with calc. As far as i know, 100% is the width including scrollbars. So if you do:
body {
width: calc(100vw - (100vw - 100%));
}
You get the 100vw minus the width of the scrollbar.
You can do this with height as well, if you want a square that's 50% of the viewport for example (minus 50% of the scollbar width)
.box {
width: calc(50vw - ((100vw - 100%)/2))
height: 0
padding-bottom: calc(50vw - ((100vw - 100%)/2))
}
I do this by adding a line of javascript to define a CSS variable once the document has loaded:
document.documentElement.style.setProperty('--scrollbar-width', (window.innerWidth - document.documentElement.clientWidth) + "px");
then in the CSS you can use var(--scrollbar-width) to make any adjustments you need for different browsers with/without scrollbars of different widths. You can do something similar for the horizontal scrollbar, if needed, replacing the innerWidth with innerHeight and clientWidth with clientHeight.
COPY & PASTE solution
Here is an easy drop-in solution based on user11990065's answer to set a css variable --scrollbar-width and keep it updated on resizes.
It also gets calculated on DOMContentLoaded and load events so that you don't have to worry about size changes during the initial rendering phase.
You can just copy and paste it to your code as it is vanilla JS (or wrap it in a 'script' tag and paste it directly into your HTML code:
function _calculateScrollbarWidth() {
document.documentElement.style.setProperty('--scrollbar-width', (window.innerWidth - document.documentElement.clientWidth) + "px");
}
// recalculate on resize
window.addEventListener('resize', _calculateScrollbarWidth, false);
// recalculate on dom load
document.addEventListener('DOMContentLoaded', _calculateScrollbarWidth, false);
// recalculate on load (assets loaded as well)
window.addEventListener('load', _calculateScrollbarWidth);
If you have dynamic height changes in your page that might show / hide the scrollbar, you might want to look into Detect Document Height Change with which you can trigger the recalculation also on height changes.
As the value is calculated with JS and set to a fixed value you can use it in calc operations in your CSS, like so:
.full-width {
width: calc(100vw - var(--scrollbar-width));
}
This will give .full-width exactly the available width.
According to the specs, the viewport relative length units do not take scrollbars into account (and in fact, assume that they don't exist).
So whatever your intended behavior is, you cannot take scrollbars into account when using these units.
body { overflow: overlay; }
If you don't want to overcomplicate things, this might be sufficient in certain situations. At least it fixed my issues well enough, since there was enough whitespace between the content and the viewport edges (Windows scrollbar would overlap your 20-ish most right pixels).
Webkit browsers exclude the scrollbars, other include them in the returned width.
This may of course lead to problems: for instance if you have dynamically generated content with ajax that add height dynamically, Safari might switch from a layout to another during page visualization...
Ok, it doesn't happen often, but it's something to be aware about.
On mobile, less problems, cause scrollbars are generally not showed.
That's said, if your problem is calculate exactly the viewport width without scrollbars in all browser, as far as i know, a good method is this:
width = $('body').innerWidth();
having previously set:
body {
margin:0;
}
100vw = width of the screen with scrollbar
100% = width of the screen without scrollbar
It is always preferable to use calc(100% - 50px) while measuring the screen width. Even on windows browsers where scrollbar is visible directly, return the screen width differently when compare with macOS browsers.
It's possible just very "ugly" looking.
First you need to have this script running to get the scrollbar width into a css variable:
document.documentElement.style.setProperty('--scrollbar-width', (window.innerWidth - document.documentElement.clientWidth) + "px");
Now for example if you want "real" 80vw do this:
calc(0.8 * (100vw - var(--scrollbar-width)));
"real" 40vw
calc(0.4 * (100vw - var(--scrollbar-width)));
As long as you're not expecting any actual horizontal scroll, you could use this:
body {
overflow-x: hidden;
}
Which will then just hide the tiny amount of horizontal scroll caused by the auto scrolling Y.
I came across this question while looking for an answer for my case.
I wanted to use WordPress's solution to center a div on the viewport with the viewport's width just like .alignfull would normally.
Situation:
<html>
<body>
<div class="main">
<div class="continer">
<div class="row">
<div class="col-12">
<article>
<div class="content">
<div class="alignfull-or-alignwide">
<p>The content.</p>
</div>
</div>
</article>
</div>
</div>
</div>
</div>
</body>
</html>
My solution:
html {
width: 100vw;
overflow-x: hidden;
}
.alignfull-or-wide {
margin-right: calc(50% - 50vw);
margin-left: calc(50% - 50vw);
width: 100vw;
max-width: 100vw; // change this for wide or w/e.
}
This solved my problem by making the root of the document as wide as the viewport. With this, you essentially ignore the width of any scrollbar.
By setting to 100vw we eliminate the width of the scrollbar on any platform.
By setting the overflow parameter, we prevent any content from being rendered outside of the viewport.
By setting margins, we center the left side of the div to it's relative positioned parent. This usually is the center of the viewport too.
Then, the negative margin pulls it to the left side of the viewport.
By doing the same on the right we create the illusion of the div being centered on the page.
Also something to watch out for: scrollbar-width on csswg.
The only way I found it to work without messing your code with "calc"
is to make the container element size to 100vw; Adding a wrapper around the container for overflow-x; This will make the container to be fullwidth like if the scrollbar was over the content.
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
html{ overflow-y: scroll; }
html, body{ padding:0; margin: 0;}
#wrapper{ overflow-x: hidden; }
.row{ width: 100vw; }
.row:after{ clear: both; content: ''; display: block; overflow: hidden; }
.row-left{ background: blue; float: left; height: 40vh; width: 50vw; }
.row-right{ background: red; float: right; height: 40vh; width: 50vw; }
</style>
</head>
<body>
<div id="wrapper">
<div class="row">
<div class="row-left"></div>
<div class="row-right"></div>
</div>
</div>
</body>
</html>
The vw unit doesn't take the overflow-y scrollbar into account when overflow-y is set to auto.
Change it to overflow-y: scroll; and the vw unit will be the viewport with the scrollbar. Then you can subtract the scrollbar size from the vw value using calc(). You can also define the scrollbar width, so it will be browser-independent.
Only downside to take into account. If the content fits into the screen, the scrollbar is shown anyway. Possible solution is to change from auto to scroll in javascript.
No, there's no way to calculate the vw without the scrollbars in CSS.
However, there's a way to solve the 100vw ruined by the scrollbar on Windows issue. You have to create a full-width element, in this case row--full-width, that beelds out of a Flex container. This solution works on both Mac and Windows:
HTML:
<section>
<div class="container">
<div class="row--full-width"></div>
<div class="row">
<div class="card">
</div>
<div class="card">
</div>
</div>
</div>
</section>
Example: https://jsfiddle.net/ecmv6ho1/show
Code: https://jsfiddle.net/ecmv6ho1/
As you can see in the example above, the row--full-width element bleeds out of the container, and it aligns with the header even when there's a scrollbar.
Tested on Edge 18 (Win), Edge 88 (Win/Mac), and Chrome 88 (Win/Mac).
The easiest way is set the html & body to 100vw:
html, body{ width:100vw; overflow-x: hidden; overflow-y: auto; margin: 0; }
The only problem is the right-most will be cut a little if scrollbar is shown.
If the case were something similar to a slider:
As posted in many answers, width 100% doesn't take into account the scrollbar, while 100vw does. In the case of having many elements that need to take the width of the window and that are nested inside a container already with 100% window width (or whose natural block width would be such), you can use:
Display flex for container
Flex: 0 0 100% for child elements
It's not my solution, but helps me create dropdown fullwidth menu with absolute in relative element in not fullwith span.
We should get scroll with in css var in :root and then use it.
:root{
--scrollbar-width: calc(100vw - 100%);
}
div { margin-right: var(--scrollbar-width); }
https://codepen.io/superkoders/pen/NwWyee
http://jsfiddle.net/BCTF9/
I have set the overflow as I want to restrict the height of the boxes and have a scroll show up when needed; so I added overflow-y: auto; as that generally does the trick. But now I see horizontal scroll bars on the second box in the example as well, though I'm not sure why?
I tried adding overflow-x: visible; but it didn't work. I don't want to set any widths on these boxes as they just need to be the width of the content + some padding.
You will also see the vertical scroll bars start too soon and don't allow the padding needed.
What can I do here?
jsfiddle Demo
Two reasons and fixes
The content in the second div taking too much width causing horizontal overflow, so increase the width
Instead of overflow-x:visible try overflow-x:hidden to hide horizontal scrollbar even if the width is higher
Try with this
CSS
.cat_list{ height:200px;
background:#e4e4e4;
width:200px;
overflow:hidden;
overflow-y:scroll;
overflow-x:hidden;}
HTML
<div class="cat_list"></div>
The scroll bars are appearing because there are many items in second div.
Try to remove these items, and they'll go away.
Fiddle
.cat_list {
overflow-y: auto;
overflow-x: hidden;
min-width: 200px;
padding: 10px;
}
Replace it
HTML CODE
<p>overflow:auto</p>
<div class="auto">This adds the scroll bar based on you content.Here only vertical scroll bar needed so that is added n visible</div>
CSS CODE
div.auto
{
background-color:#00FF00;
width:100px;
height:100px;
overflow:auto;
}
OUTPUT
When I change my HTML code to
CHANGED HTML CODE
<p>overflow:auto</p>
<div class="auto">content less than div height </div>
my output will be
NEW OUTPUT
So I want to use overflow:auto property. So that after some minimum height scroll-bar will appear, but when content is less than height of div then I do not want to use whole height of div.height should be equal to content's height.Please help.
You simply need to change height: 100px; to max-height: 100px; and it will be automatic below that to the height of the content.
You want to use max-height instead of height.
http://tinker.io/bbf56/1
try this,
div.auto
{
background-color:#00FF00;
width:100px;
max-height:100px;
overflow:auto;
}
ha realised that the height:auto is default anyway, so you can just remove height altogether.
My CSS looks like this:
div.SOMECLASS {
position: absolute;
max-height: 300px
height: auto;
width: auto;
overflow: auto;
...
}
The div height and width scale automatically. The height has a fixed maximum though: as soon as this value is reached vertical scrollbars appear. This works all pretty swell.
Now the issue:
When the vertical scrollbar appears, it uses up around 10px of horizontal space, as the scrollbar will be placed inside the div.
However, the width is not autoscaled to allow for these additional 10-something pixels used up by the vertical scrollbars. As the horizontal width before the adding the vertical scrollbars was just exactly right for the content (as expected from the width:auto setting), the div now also displays horizontal scrollbars - to allow for the missing 10 pixels. This is silly.
How can I avoid having these horizontal scrollbars and just autoscale the width of the div to make the vertical scrollbars fit?
If possible I am looking for a solution which does not rely on just completely disabling horizontal scrolling, as this will probably be needed at some point (i.e. for certain inputs).
Just figured out a pretty passable solution (at least for my version of this problem).
I assume the issue with width: auto is that it behaves similarly to width: 100vw; the problem is that when the vertical scrollbar appears, the viewport width remains the same (despite the ~10px scrollbar), but the viewable area (as I'm calling it) is reduced by 10px.
Apparently defining width by percentage defines it in terms of this "viewable area", so changing your code to:
div.SOMECLASS {
position: absolute;
max-height: 300px
height: auto;
width: 100%;
overflow: auto;
...
}
should allow the content to rescale properly!
p.s. You can also instead add overflow-x: hidden, which will stop the horizontal scrollbar from appearing, instead simply cutting ~10px off of the right side of your div when the vertical scrollbar appears.
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.
Often setting 100vw is the problem. Just remove it and your width will be 100%, which will be what you want anyways.
Number 1 search result on Google for my problem (similar to OP, but not the same).
Here is a common scenario for seemingly unnecessary-horizontal-scrollbar:
You have an element, say, a table, which uses auto-sizing. If the auto-sizing is done before all the rows are added, then it will not calculate enough room for a vertical-scrollbar. Doing the resize after adding rows fixed my issue -- even then, I needed a timeout
this.http.get('someEndPoint').subscribe(rows => {
this.rowData = rows;
setTimeout(()=>{sizeColumnsToFit()}, 50);
});
This bug (specific to Firefox) occurs even when not setting a fixed width.
For instance, if you have a vertically scrollable container div (overflow: auto;) inside a flexible wrapper div (display: inline-block;), then when you resize the window to be smaller than the content can wrap, first, a horizontal scrollbar will appear in your container div, and only after that, the flexible wrapper div will grow or eventually a secondary horizontal scrollbar will appear in your window.
The result is a useless horizontal scrollbar, that only can scroll the width of the vertical scrollbar:
In order to get rid of this issue, you could use the javascript-code from this example (tested in Firefox and Chromium):
<!DOCTYPE html>
<html>
<body>
<style type="text/css">
.page {height: 200px;width: 400px;overflow: auto;background-color: #ccc;border: 5px solid #000;margin: 5px;}
.wrapper {display: inline-block;min-width: 100%;margin: 20px;}
.scroller {overflow: auto;max-height: 100px;background-color: #f00;}
.content {min-height: 500px;min-width: 400px;background-color: #cfc;}
</style>
<div class="page">
<div class="wrapper">
<div class="scroller">
<div class="content">
The wrapper-div should expand to fit the scroller content.
Reduce the browser window width, and a useless horizontal scrollbar appears.
</div>
</div>
</div>
</div>
<div class="page">
<div class="wrapper">
<div class="scroller ensure-scrollbar-width-padding">
<div class="content">
But with the javascript-function, this is now fixed.
There is no horizontal scrollbar in the wrapper-div.
</div>
</div>
</div>
</div>
<script>
var ensureScrollbarWidthPadding = function(elem)
{
if(!parseInt(elem.scrollWidth) || !parseInt(elem.clientWidth) || !parseInt(elem.offsetWidth))
{
return; // no browser-support for this trick
}
var update = function()
{
// reset to as if not having any right-padding
elem.style.paddingRight = '0px';
// check if horizontal scrollbar appeared only because of the vertical scrollbar
if(elem.scrollWidth !== elem.clientWidth)
{
elem.style.paddingRight = (elem.offsetWidth - elem.clientWidth) + 'px';
}
else
{
elem.style.paddingRight = '0px';
}
};
window.addEventListener('resize', update, false);
window.addEventListener('load', update, false);
update();
return update;
};
(function()
{
var elems = document.getElementsByClassName('ensure-scrollbar-width-padding');
for(var i=0;i<elems.length;++i)
{
ensureScrollbarWidthPadding(elems[i]);
}
})();
</script>
</body>
</html>
The javascript function ensureScrollbarWidthPadding dynamically adds a padding-right to the vertically scrollable container, to ensure that the horizontal scrollbar will never appear.
I had the same issue and fixed it by setting up my CSS as follows:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
height: 100%;
}
body {
min-height: 100%;
width: 100%;
}
Here is also an awesome video that explains it very clearly, or the original article!
Please take a look at the following fiddle:
http://jsfiddle.net/ellenchristine/tty3e/
Note that when you expand or contract the Results panel, the jQuery Masonry plugin populates the new space with images. However, I'm having trouble with the footer area...when you scroll to the very bottom, the last image is always partially hidden behind the fixed footer. I've tried adding margins on the footer, on the wrapper, everything, but am not getting anywhere. Anyone see what I'm doing wrong?
If you remove the height settings you had on #wrapper, and set a bottom padding, it appears to function as you need. The height 100% was taking up 100% of the parent, since all the elements within #wrapper were floated, and that was just the height of the display window. If you want to see that in action, put a border on #wrapper before removing the height to see the problem.
#wrapper {
width:960px;
min-height: 100%;
padding: 15px 0 115px;
margin: 0 auto;
}
http://jsfiddle.net/tty3e/8/
try overflow:hidden on #wrapper