I am learning CSS, I am new to this field. Please excuse me if my questions is naive.
I have a simple HTML containing 1 div.
.square {
background-color: blue;
width: 90vw;
height: 90vh;
margin-left: 5vw;
margin-right: 5vw;
}
<!doctype html>
<head>
<link href="viewport-cord.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class='square'></div>
</body>
I am expecting a margin of 5% of viewport width on both sides of the div. However, it seems that we have broader gap in the left side of div compared to right. I am not sure where these extra margin is coming from.
You can do this:
Give max with and then subtract 10% (5% each side), then center square with margin auto.
CSS
.square {
background-color: blue;
width: calc(100vw - 10%);
height: 100vh;
margin: 0 auto;
}
DEMO HERE
Since you said you are new to HTML & CSS, let me give you a breif description on how to adjest widht of an element based on the viewport.
Viewport
The viewport is the area of your browser where the actual content is displayed - in other words your web browser without its toolbars and buttons. The units are vw, vh, vmin and vmax. They all represent a percentage of the browser (viewport) dimensions and scale accordingly on window resize.
Lets say we have a viewport of 1000px (width) by 800px (height):
vw - Represents 1% of the viewport's width. In our case 50vw = 500px.
vh - A percentage of the window's height. 50vh = 400px.
vmin - A percentage of the minimum of the two.
In our example 50vmin = 400px
since we are in landscape mode. vmax - A percentage of the bigger
dimension. 50vmax = 500px.
You can use these units anywhere that you can specify a value in pixels, like in width, height, margin, font-size and more. They will be recalculated by the browser on window resize or device rotation.
case 1
Now considering your issue, I don't see any change in width on either side, because if you see your inspector->layout->margin I can see both sides showing 64 on the screenshot you provided.
case 2
If you really do see the change in your system again. Try removing the external CSS you have mentioned to see if that's causing any issue and then put margin:0px for html and body.
Hope this help's you out...
Related
I have a fluid container and I want its height to gradually change based on the width of the window (since the with of the div is 100%).
Note that the desired behavior is similar to the one when the aspect-ratio css rule is applied, which is a linear gradual increase/decrease.
Such variation should stop at a certain min and max height.
I understand that some js might be required, so I am open to it if css alone fails.
You should look into different available units of width in css. Mainly the vh and vw. In the example below you can see a div, with a height of 10% of viewport width, and width of 10% of viewport height.
div {
width: 10vh;
height: 10vw;
background-color: red;
}
<div>Custom div</div>
I can do this in JavaScript easily enough, but would like to know if it's possible with straight CSS: keep a square div in a window that fits within the window size regardless of what that is.
Any solutions I've found do not account for the height becoming less than the width.
Logically speaking what I want is, when the window width is less than the height, give me a square of that width. If the height is less, then give me a square of that size.
The closest solution I've seen uses a width and height measured in vw, but it does not work when the window is very wide and short.
I suggest using the vmin unit.
Source
From the viewport-percentage lengths documentation on MDN:
Viewport-percentage lengths define the value relative to the size of the viewport, i.e., the visible portion of the document. Viewport lengths are invalid in #page declaration blocks.
vmin
Equal to the smaller of vw and vh.
Example
Use the full page link to test it with the example in your browser.
body {
/* So the whole viewport can be used by the square. */
margin: 0;
}
#sqr {
/* Uses the 'outer' (i.e. border-box) size when setting width and height. */
box-sizing: border-box;
width: 100vmin;
height: 100vmin;
background-color: red;
border: yellow 10px solid;
}
<div id="sqr"><div>
recently I found an responsive website which changes the image contents in different size of screen. When the screen size is big like desktop computer, the content of the div is like(there is no other text content, just a div filled with an image using background-image):
#div {
background-image: url('images/pc-content01.jpg');
background: no-repeat center center;
height: 1129px;
}
When the screen size gets smaller, the css style changes like:
#div {
background-image: url('images/pc-content01.jpg');
background-size: cover;
height: 0;
padding-bottom: 95.5%;
}
And the background image will be swap to another image when the screen size is as small as moblie devices.
And my question is, how the percentage of padding-bottom is calculated, why percentage in height is not working but percentage on padding-bottom works?
(I understand why percentage on height is not working).
In padding percentages refer to the width of the containing block. In this case is used to maintain the aspect ratio (the image one) when the width changes. It is a trick often used in responsive design. A box with an intrinsic ratio. Percentage in height works differently
The percentage is calculated with respect to the height of the
generated box's containing block...
MDN, so is not suitable for that purpose.
When using a percentage value for paddings, it always refers to the width of the element. See MDN. So in this case the padding-bottom of #div would be 95.5% of its width. When setting percentage value for height it calculates it by using the height of the containing block. See MDN
Height in percentage
Height using percentage only works if we give height using percentage to the body and html of the page, it will not work otherwise.
Like this-
html, body{
height:100%;
background:black;
}
body>div{
height:50%;
background:gray;
}
<body>
<div>HI</div>
</body>
Padding-bottom in percentage
But in the case of percentage on padding-bottom, it works irrespective to the body or HTML. It only checks the width of the containing element.
Like this -
html, body{
background:black;
}
div{
background:gray;
padding-bottom:20%;
}
<body>
<div>HI</div>
</body>
I am using a div to create an accent. It's parent is the content div, which has no specific height, as it is the height of the browser. The div is as simple as the following:
<div class="bar-top"></div>
It's CSS rule is:
.bar-top {
background-color: #000d12;
height: 3%;
max-height: 3%;
min-height: 3%;
}
This rule does not work. Though, if the percentages are replaced with pixel values, the div displays correctly. I assume this has something to do with the parent having no definite height, but I would like to know more technically why, and how to overcome this if I want a div to be a percentage of the web page's height.
Simple math 100% of nothing is nothing. You are correct about the height being based off the parent of the container. You can use % height at the very top element of the page the html and body see below.
html, body{
height: 100%;
}
Though note this is your entire web page so if the full height of you entire webpage is 10000px and you set the height to be 3% that 3% will be out of the 10000.
To the 3% question: you can use css3 height: 3vh that's 3% of the viewport
I have to fit an iframe in screen height. Obviously, I wanted 100% as in width but, since that doesn't work, I used 100vh.
But vh like vw is not exactly 100%.
In my laptop through chrome while the 100% width renders perfectly without the need for a horizontal scroll bar, vw has about a centimeter extra.
vw and vh stand for viewport width and viewport height respectively.
The difference between using width: 100vw instead of width: 100% is that while 100% will make the element fit all the space available, the viewport width has a specific measure, in this case the width of the available screen, including the document margin.
If you set the style body { margin: 0 }, 100vw should behave the same as 100% (for an element that is a child to body).
Additional notes
Using vw as unit for everything in your website, including font sizes and heights, will make it so that the site is always displayed proportionally to the device's screen width regardless of it's resolution. This makes it super easy to ensure your website is displayed exactly the same in both workstation and mobile.
You can set font-size: 1vw (or whatever size suits your project) in your body CSS and everything specified in rem units will automatically scale according to the device screen, so it's easy to port existing projects and even frameworks (such as Bootstrap that already uses rem as unit for everything) to this concept.
Havenard's answer doesn't seem to be strictly true. I've found that vw fills the viewport width, but doesn't account for the scrollbars. So, if your content is taller than the viewport (so that your site has a vertical scrollbar), then using vw results in a small horizontal scrollbar. I had to switch out width: 100vw for width: 100% to get rid of the horizontal scrollbar.
You can solve this issue be adding max-width:
#element {
width: 100vw;
height: 100vw;
max-width: 100%;
}
When you using CSS to make the wrapper full width using the code width: 100vw; then you will notice a horizontal scroll in the page, and that happened because the padding and margin of html and body tags added to the wrapper size, so the solution is to add max-width: 100%
#Havenard's answer provides the perfect explanation for the question. Adding to that, this provides a visual representation of the difference.
You'll be able to notice the key difference between 100vw and 100% when you have a site with scrollbars and an element that is supposed to fit the entire width of the screen.
Option 1
Below is an example of the same.
All i'm doing in the code below is changing the width of <h1> tag from 100vw to 100% when you hover over it.
body{
/* margin: 0; */
}
.scroll{
height: calc(110vh);
}
h1{
width: 100vw;
/* width: 100%;*/
text-align:right;
outline: 5px solid black
}
h1:hover{
width: 100%;
}
h1:before{
content: "100vw "
}
h1:hover:before{
content: "100% "
}
<div class = "scroll">
<h1>Width</h1>
</div>
If you run the above code snippet and hover the text, you'll notice 2 things:
the horizontal scrollar disappears
the entire text will be visible
to you
Note: after running the above snippet, you can play around with above code in browser devtools to see how it affects the elements
Option 2 (Chrome and Edge)
.scroll{
height: calc(110vh);
display: flex;
align-items: baseline;
}
h1{
width: 100vw;
/* width: 100%; */
text-align:right;
outline: 10px solid black
}
<div class="scroll">
<h1>Test</h1>
</div>
Another way to visually see the difference in your own project is by setting a display:flex style to an element with 100vw.
When you highlight this elements in browser devtools, You can notice the a leftward point arrow at the right end of the element. Also you can see than the shading of the highlighted elements spans across the scroll-bar, indicating that it is considering the entire screen-width (including scroll-bar width)
Other questions, that address similar issue are:
100vw causing horizontal overflow, but only if more than one?
CSS Units - What is the difference between vh/vw and %?
Prevent 100vw from creating horizontal scroll