I have a div that needs to be full screen width inside a parent div that has a limited with. Simplified, it's something like:
HTML:
<div class="container">
<div class="banner">
</div>
</div>
CSS:
.container {
width: 1170px;
margin: auto;
}
.banner {
width: 100vw;
margin-left: calc( 50% - 50vw);
}
which works fine, except for one thing: The scrollbar on the page covers some of the content in the child div, because 100vw appearantly includes the scrollbar width. So is there a way around this so I can set the width to (100vw - scrollbar width), or perhaps a completely different way to achieve what I want to do with pure CSS?
Try to use % where you can. vw is a percent of the viewport width including the scrollbar and % is a percent of the wrapper object, where the body is not rendered inside the scrollbar.
Don't use a fixed width (px) container. It's bad practice and will not render well on mobile screens. See Responsive Web Design for more.
Don't use vw for containers (or banners). It has weird effects on the scrollbar.
Finally, I don't understand why you want something to be at 300vw or 3x the width of the viewport, but sure. If you designed your page right with responsive web design and avoided setting any wrapper's dimensions with px, then it shouldn't be hard to know what that width of the containing div is. For example, if the wrapper (containing div) is at 30% of the viewport and you want your banner to be 300% of the viewport, then you want 1000% for your banner to span the width of three screens.
You could set the scrollbar width and subtract it from the container's width using 'pure CSS'.
You could give width to the scroll bar in webkit-browsers using:
body::-webkit-scrollbar {
width: scrollbarwidthpx;
}
and set the content width as:
width: calc(100vw - scrollbarwidthpx);
You could make use of this article regarding customizing scrollbar
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
There is a way to set max-height in %, but is here any way to set DIV max-height, so it would be 100px smaller than window height with only CSS?
It must not be a fixed layout, user must be able to scroll page vertically, but DIV always should be resized to window height - 100px. Is this possible, or will I have to use JS for that?
Yes:
#specificElement {
height: calc(100vh - 100px);
box-sizing: border-box;
}
This uses the CSS calc() function to subtract 100px from 100vh (1vh being one percent of the view-port's height) and uses the result as the value of the height property.
The box-sizing forces the browser to include padding, and borders, in the calculated height of the element.
Obviously use a relevant selector for your use-case.
References:
calc().
CSS lengths.
#specificElement {
height: calc(100vh - 100%);
min-height: calc(100vh - 100px);
}
set min height so that your dyanmic content should not get effect and give height in percentage for dymanic result.
I'm trying to make one div with height 100% - 130px;
Code is:
height: calc(100% - 130px); // Here 80px of TOC-header and 50 of TOC-footer
height: -moz-calc(100% - 130px);
height: -webkit-calc(100% - 130px);
When I edit it with browser console(Inspect Element) it works well. But when I apply the same in code it shows calc(-30%); And due to that the contents get no visibility.
I've attached a screenshot below of firebug. Really confusing moment.
Any help will be appreciated. Thanks.
Saying height: 100% refers to the same height of it's parents height.
In your case, .element1 has a height of 100% which is not recognizable. Set a real height to this element and you will see the expected output.
For example:
.element1 {
height :200px;
}
DEMO
Wrap your item in another div, give it 100% height with a padding top or bottom of 130px or padding bottom and top of 65px. This way you can even position your element vertically.
How can I make the height of a div tag auto resize according to the height of the browser?
When I do height: 100%, it only resizes based on how much text is in there.
Here is the web page and it's the first div, the one with the blue background is the one that I am trying to make the height auto resize:
http://rachelchaikof.com/awareness/
Actually you must be missing to set an height: 100%; for parent elements, also make sure you use this to make your div height 100%
html, body {
height: 100%;
width: 100%;
}
100% height - resize window problem
"height:100%" means 100% of the browser window. If the page beyonds the browser window (ie. needs scrolling to access) those bits of the page are outside the elements set to height:100%. Which if you have backgrounds or other effects (e.g. borders) won't extend beyond the first 100%.
The correct way to handle things is
selector {min-height: 100%;} /* for proper browsers */
* html selector {height: 100%;} /* for IE */
If you use min-height in this way, you must ensure all the antecedent elements have a fixed height of 100% (ie. html & body).
or you can use Jquery.
$(window).resize(function() {
$('body').prepend('<div>' + $(window).width() + '</div>');
});
height:100% means the same height as the parent, that is, the element your div sits in. So if you want to make it the same height as the browser, you'll need to make all its ancestors 100% high, all the way up to html!
When is comes to responsive design there are many creative ways to approach the issue at hand.
You could try using percentages to make your Design more responsive. Using percentages is a safe bet for maximizing on the users viewport.
eg.
html, body {
height: 100%;
width: 100%;
}
From there you can play with your site containers and go more specific.
Also some JavaScript in your head section of the HTML can help you detect screen sizes and adjust different CSS rules accordingly:
<!-- hide script from old browsers
//<![CDATA[
var windowWidth=screen.availWidth;
var windowHeight=screen.availHeight
function sniffer() {
var el=document.getElementById("body");
if(screen.width<=600) {
el.style.width='100%';
el.style.height= windowHeight;
el.style.margin="auto";
}
}
onload=sniffer;
//]]>
// end hiding script from old browsers -->
The JavaScript above is checking if the user's screen is smaller or equal to 600px; if so, it adjusts the width, height, margin rules for the body element.
Hope this helps!