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
I am using this website as an example. http://imgur.com/xyswjQH Here I have a screenshot of the website in fullscreen. However when I resize the page http://imgur.com/ZAKtsR9 you can see that the page almost cuts off elements instead of jumbling them all around. Is there a way I can achive this cutting off affect in html and css only? If you need my code just ask in the comments.
If your goal is to create a fixed width, you can create a wrapper div and set its width to 800px (just as an example) and it's margin to 0 and auto to Center the div if you would like.
If you'd like to make it responsive you can change width to max-width.
<html>
<head>
<style>
.wrapper {
width: 800px;
margin: 0 auto;
}
</style>
</head>
<body>
<div class="wrapper">
<p>Content here!</p>
</div>
</body>
</html>
You probably didn't need to come here for that question haha. All you need to do is set a width on the body or a div.
Cheers!
I'm looking to place an image inside the .hero-unit that takes up 100% of the unit. This means that it would scale according to the overal window size.
Right now i have the in there, but it looks like there's 100px padding to the right of the image. If i adjust the image max-width: 100% to something larger, it does not scale accordingly.
<div class="hero-unit">
<img src="images/landscape.png">
</div>
Does anyone have an idea of how to remove the padding on the right, but also preserve the auto-resizing capabilities of bootstrap?
As mentioned use the following selector :
.hero-unit img {
width: 100%; height: auto;
}
Working sample : http://jsfiddle.net/basarat/MgcDU/2145/
width: 100%; height: auto; should work, as long as the container div's resizing according to window width is correct.
You can do the following :
Here's one jsfiddle http://jsfiddle.net/shail/5YD2J/1/
<div class="container">
<div class="hero-unit">
<img src="http://placehold.it/1500x400">
</div>
</div>
.hero-unit {
padding:6px;
}
You need to have your image in good resolution , scaling an image with small width and height will lead to bad stretched dimensions and wont look good .
i'm currently trying to make an image resize depending on the browser dimensions. I've managed to get the image to resize horizontally, if I make the browser window narrow the image will resize proportionally just fine. However when I resize the window vertically, Firefox just doesn't seem to want to do it! The code is pretty simple
<body>
<div id="content">
<img src="images/abc.jpg">
</div>
</body>
and the CSS:
#content {
height: 100%;
padding: 50px;
}
#content img{
max-height:100%;
max-width: 100%;
}
Another issue is that the image does seem to resize vertically in chrome, but i have to drag the bottom of the browser well over the image before it start doing this. I'd rather the image start to rezise as soon as the bottom content padding "hits" the bottom of the image so to speak. Hope this is making sense.
Any help much appreciated
try this, taken from Twitter bootstrap 2
html,body{height:100%;}
#content {padding: 5%;}
#content img {
max-height: 100%;/* Part 1: Set a maxium relative to the parent */
width: auto\9;
/* IE7-8 need help adjusting responsive images */
max-width: auto;
/* Part 2: Scale the height according to the width, otherwise you get stretching */
vertical-align: middle;
border: 0;
-ms-interpolation-mode: bicubic;
}
Because height could potentially go on forever, you cant set the height of anything relative to the browser window to be a function of percent. What i'm saying is that you will need to put it inside of something with a fixed height to use a per-cent value. Good Luck!
-b
You've only specified the "max-height" and "max-width" properties.
If you don't specify the actual "width" or "height" properties, the image initialy takes the width and height of its physical dimensions (if not larger than the specified max-height and max-width).
Said that, the behaviour you've noticed, is correct.
The answer is, as already mentioned, to specify also a initial width or height property, dependig wether your image is portrait or landscape.
Is that what you want?
I actually just added a height to html and body, so that #contents height doesn't get to high.
body, html {
height: 100%;
margin: 0;
padding: 0;
}
(And box-sizing: border-box to #content, because it seems like you'd want that)
How do I set the width of a web page to always be exactly 1000px ? For example, like Facebook or here on StackOverflow. The site just will not resize. If the browser window is smaller than 1000px, the scroll bar is needed. And the page should be centered in the browser.
I can always put content of the page inside <div></div> tags, but I have read that it will not work for all browsers. So what is the right way to do it ?
Enclosing the content in a div that has the CSS width property set to 1000px will work across browsers.
CSS:
div.content { width: 1000px }
HTML:
<body>
<div class="content">
...
</div>
<body>
However, consider using 960 pixels instead of 1000. It is a reliable standard that works on most devices down to a 1024 pixel display width including space for scroll bars and such.
Directly set the body to display at that width:
body {
width:1000px;
margin:0 auto;
}
However, I usually use a wrap div as follows:
html
<body>
<div class="wrap"></div>
<body>
css
div.wrap {
width:1000px;
margin:0 auto;
}