In the following example, the div has the pre-defined height of: 300px.
The last city of the scrollable dropdown is Zimbawe and does not get displayed on an iPhone 6 screen for example.
I want to change the scrollable dropdown div in such a way to not specify the height and make the div end where the screen ends.
Any ideas ?
The library we use fro the dropdown is:
https://github.com/mukeshsoni/react-telephone-input
An you can see here the default height of the dropdown non dynamic:
https://github.com/mukeshsoni/react-telephone-input/blob/master/src/ReactTelephoneInput.js#L477
try this out, setting height depending upon the viewport(vh).
.div {
height: 100vh;
overflow: auto;
}
{height: 100vh;} matches the height of the viewport.
Try this:
CSS
div { // change selector
height: auto;
}
On mobile, such dropdown should appear as full overlay. Exactly like the select element options would appear on mobile.
Target mobile devices using #media and use position: fixed; with the respective positions and size (explore vh and vw units). Than use overflow-y: auto; to make your modal list scrollable.
try adding max height and overflow
.div {
max-height: 150px;
overflow: scroll;
}
you have to adjust the max-height according to screen size manually.
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
Let's say I want to create an HTML page with one main div that holds all the content.
The div should hold other divs and be fixed in the center of the page like in the image.
How should I specify the width? In a % value or a value in px? What is the best practise?
And what should be the correct value?
Please sorry if this has been covered before....
Image is here:
EDIT
So much nice answers... Thank you all very much
It all depends on the content you will be presenting and what you want to do with it. You may choose to use a fixed width layout if there is no need for the content to expand, or if you want to keep the text/design constrained within the width of the DIV. Though, one thing you may want to consider is using a combination of percentage and fixed width. For example, you may choose for your DIV to be 95% of the page as long as the minimum width is not below 700px and the maximum width is not over 950px. The result of this is a DIV that will expand and contract within your specified constrains.
div#container {
width:95%;
max-width: 950px;
min-width: 700px;
margin: 0 auto 0 auto;
}
In my opinion you should use px
Cause the % will depend on the wide-screen of the user, so images could display bad
I can't see your image but you can do that with two divs using percentages.
HTML:
<div id="outer">
<div id="inner">Your centered div</div>
</div>
CSS:
#outer {
width: 100%;
}
#inner {
width: 50%; // whatever width you want - I can't see your image
margin: 0 auto;
}
To center the div simply put left and right margins to auto on css.
Regarding the % or px, it would REALLY depend on the layout you are willing to code. If your layout was made thinking in a fluid layout, then you should use % but add a max-width so it would not stretch past n px.
For example:
You layout was made for a 1024px screen using 960px grid. But it would be cool to let it stretch a bit for 1280px screen users. So you put width:100%; and after ir, max-width:1280px.
So any user with bigger screen will see the layout for a 1280px.
I will suggest to use body margin:0 and use container div with margin auto, and use pixel for content width and height.
<div class="container">
<!-- HTML Content here -->
</div>
.container{
margin-right: auto;
margin-left: auto;
}
Css float left and right control the flow of the div. if you want to place two divs, right and left, then use
.left-div {
float: left;
width:200px // use pixel to control width
margin-left: 5px;
}
.right-div {
float: right;
width:200px;
margin-right: 5px;
}
First: Holding that main div in center position can be done with margin-left: auto; margin-right: auto;.
Second:
I don't think, that there is a basic best practice, because the usability of variable with depends highly on the content itself.
One usable solution that covers both could be using fixed width depending on the device (desktop, table, phone) using media queries.
is it possible to have a div (or other element) resize its height in relation to its width (or the other way around) using CSS? basically, to get it to behave the way an image with a percentage width resizes proportionally as the browser window is resized?
If you want to set a width or height relative to a .parent element and you know the aspect ratio that needs to be maintained, you can do something like this:
.parent{
width: 150px;
}
.child{
width: 100%;
padding-top: 50%; /* outer height will be 75px (150px*0.5) */
}
Note that you are relying on having a height (or width) of 0 and defining it based on the padding only. So, if you want to add any content you will probably need to wrap it within an absolutely positioned div within .child. See this fiddle for an example
Look at this related question. In short: No, it's not possible using only CSS
I have to use a float div (the main window of my application), and I'd like to center that floated DIV based on the client's screen width. How can I accomplish that?
Right now I'm using a left:20% but that's not always centered depending on the user's screen resolution
Do you want the div to grow relative to the browser window, or to fit the content inside of it?
If the former, you can just use a percentage based width rather than pixel, and it should still center.
If the latter, don't use a float...start by setting width:auto; (I think that should make it auto-expand to fit content). Then you will need some javascript to measure the width of the DIV, set the width: css property in pixels, then measure the browser window, and center the container based on these measurements.
Sorry, I was wrong about width:auto;. I guess just float it, and then use javascript like I described above to manually set the margin-right and margin-left.
Sorry, thought up a better solution.
#float {
float:left;
margin-left:50%;
position:relative;
}
And then, using jquery,
$(document).ready(function() {
var float_width = $('#float').width();
var left_spacing = float_width / 2;
$('#float').css('left', '-' + left_spacing);
});
Forgive me if my javascript is off or doesn't quite work...I didn't test it and I'm a JS noob :)
You can try to use
.mainWindow {
margin: 0 auto;
}
then make sure the parent element is text-align: center;
I usually use an auto centered container div and then put any other containers (like your floated div) inside that container. Is there any particular reason you can't do that?
Example CSS:
#container {
width: 960px;
margin: 0 auto;
position: relative;
}
My solution is easy with css
.div{
position: absolute;
top: calc(50vw);
left: calc(50vw);
}
is code clean