For example, when you change the height of the browser while you're here on Stack Overflow, the content on the page doesn't change. However, if you visit my portfolio: http://seanrobenalt.com/ and change the browser height, some elements get scrunched up. Can't seem to figure out what's going on.
What's going on is that you've set the content as follows:
.header-logo {
background-color: rgba(229,229,229,0.4);
box-sizing: border-box;
display: block;
height: 10vh;
padding-top: 10px;
position: relative;
text-align: center;
width: 10vh;
}
Your height and width are set to height: 10vh; respectively width: 10vh;.
And what is vh short for? It's short for viewport-height andvh is a measurement unit, but unlike px it's not absolute.
Something that is 10px in height or width, will ALWAYS be 10px in height or width, no matter how you resize the window, because we're talking the static physical pixels on your screen.
vh, vw, or % on the other hand are relative units of measurement. Take % for instance. If you make a div, that is 100% in width – It will stretch the length of the entire parent element. And if the parent element is 100px wide, then the child element will be 100% of 100px which is.... 100px wide. if you set it to 50% of 100px – It's 50px wide.
So what happens if you set an element to 100vw? It can be simplest described as 100% of the entire browser width – or "Viewport".
So something that is 100vh will be 100% of view-height. (viewport height).
And your image is 10vh, which means, it will always be 10% of how high the browser window is. So if the browser is resized to be exactly 500px high – Your image will be 50px high.
What you need to do is set the size of the image in px for it always keep it's height and width.
I suggest you setup a little playground of a few divs, and start playing around with different measurement types.
Make a few divs that are using width: 100px; height: 200px; width: 100%; height: 100%; width: 100vw; height: 100vh; And place the divs in each other and see what happens.
Hope this helps.
You're calculating the layout of various elements on your page by using the vh (viewport height) unit. 100vh is equivalent to the height of your browser window at any given moment, so resizing the browser is doing exactly what it was coded to do.
Example element I see inspecting your site:
.full-hero {
background-color: #c7dbfc;
background-size: cover;
box-sizing: border-box;
height: 90vh;
padding-top: 10vh;
}
Related
For example: I have an element which takes the full width of the viewport. I want its min-height to be half of its width, to get a ratio of 1:2.
On a 1600px wide desktop monitor the element's width would be about 1583px (monitor width minus scrollbar width), but its min-height would be 800px, because vw doesn't substract the scrollbar's width. So that would not be a 1:2 ratio.
An easy solution would be padding-top: 50%;, but if there's text within the element, that doesn't work. Alternative: a left floating pseudo element ::before with padding-top: 50%; would create the desired min-height in the ratio of 1:2, but that would be kinda hacky.
Am I missing something? Is there any clean way?
First thing you should do is include the following so the default padding and margins given by the web browser are removed:
* {
padding: 0;
margin: 0;
}
For the element you want to have 100vw and half height:
.half_height{
width: 100vw;
aspect-ratio: 2/1;
}
.container {
Width: calc(100vw - calc(100vw -100%));
Height: 50vh;
}
I just learned about a new and uncommon CSS unit. vh and vw measure the percentage of height and width of the viewport respectively.
I looked at this question from Stack Overflow, but it made the units look even more similar.
How does vw and vh unit works
The answer specifically says
vw and vh are a percentage of the window width and height,
respectively: 100vw is 100% of the width, 80vw is 80%, etc.
This seems like the exact same as the % unit, which is more common.
In Developer Tools, I tried changing the values from vw/vh to % and viceversa and got the same result.
Is there a difference between the two? If not, why were these new units introduced to CSS3?
100% can be 100% of the height of anything. For example, if I have a parent div that's 1000px tall, and a child div that is at 100% height, then that child div could theoretically be much taller than the height of the viewport, or much smaller than the height of the viewport, even though that div is set at 100% height.
If I instead make that child div set at 100vh, then it'll only fill up 100% of the height of the viewport, and not necessarily the parent div.
body,
html {
height: 100%;
}
.parent {
background: lightblue;
float: left;
height: 200px;
padding: 10px;
width: 50px;
}
.child {
background: pink;
height: 100%;
width: 100%;
}
.viewport-height {
background: gray;
float: right;
height: 100vh;
width: 50px;
}
<div class="parent">
<div class="child">
100% height
(parent is 200px)
</div>
</div>
<div class="viewport-height">
100vh height
</div>
I know the question is very old and #Josh Beam addressed the biggest difference, but there's still another one:
Suppose you have a <div>, direct child of <body> that you want filling the whole viewport, so you use width: 100vw; height: 100vh;. It all works just the same as width: 100%; height: 100vh; until you add more content and a vertical scrollbar shows up. Since the vw account for the scrollbar as part of the viewport, width: 100vw; will be slightly bigger than width: 100%;. This little difference ends up adding a horizontal scrollbar (required for the user to see that little extra width) and by consequence, the height would also be a little different on both cases.
That must be taken into consideration when deciding which one to use, even if the parent element size is the same as the document viewport size.
Example:
Using width:100vw;:
.fullviewport {
width: 100vw;
height: 100vh;
background-color: red;
}
.extracontent {
width: 100vw;
height: 20vh;
background-color: blue;
}
<html>
<body>
<div class="fullviewport"></div>
<div class="extracontent"></div>
</body>
</html>
Using width:100%;:
.fullviewport {
width: 100%;
height: 100vh;
background-color: red;
}
.extracontent {
width: 100%;
height: 20vh;
background-color: blue;
}
<html>
<body>
<div class="fullviewport"></div>
<div class="extracontent"></div>
</body>
</html>
A percentage of the full viewport width. 10vw will resolve to 10% of the current viewport width, or 48px on a phone that is 480px wide. The difference between % and vw is most similar to the difference between em and rem.
A % length is relative to local context (containing element) width, while a vw length is relative to the full width of the browser window.
Thank you for your answer and code example, #IanC. It helped me a lot. A clarification: I believe you meant "scrollbar" when you wrote "sidebar."
Here are some related discussions about viewport units counting scrollbars that I also found helpful:
Why does vw include the scrollbar as part of the viewport?
Using 100vw causes horizontal cropping when vertical scrollbars are present
Prevent 100vw from creating horizontal scroll
Difference between Width:100% and width:100vw?
The W3C spec for the vw, vh, vmin, vmax units (the "viewport percentage lengths") says "any scrollbars are assumed not to exist".
Apparently Firefox subtracts scrollbar width from 100vw, as #Nolonar's comment at Difference between Width:100% and width:100vw? observes, citing "Can I Use".
Can I Use, perhaps in tension with the spec (?), says all browsers other than Firefox currently "incorrectly" consider 100vw to be the entire page width including the vertical scroll bar.
the vw (view-width) and vh (view-height) units are relational to the view-port size, where 100vw or vh is 100% of the view-port's width/height.
For example,
if a view-port is 1600px wide, and you specify something as being 2vw, that will be the equivalent of 2% of the view-port width, or 32px.
% unit is always based on the parent element width of the current element
There is a difference that has not necessarily been raised. 100vw includes the width of the scrool bar, while 100% does not include it. It is a small difference, but important when doing design.
The difference between % and vw is most similar to the difference between em and rem. A % length is relative to local context (containing element) width, while a vw length is relative to the full width of the browser window.
I am rendering an image into a div. I want to avoid stretching of my image.
div {
height: 300px;
width: 300px;
}
img {
min-width: 300px;
min-height: 300px;
max-height: 300px;
}
My problem is that my image's width stretches. I want it to have the regular width even though parts of the image will be missing.
div {
height: 300px;
width: 300px;
overflow: hidden;
}
img {
height: 300px
max-width: none;
min-width: 300px;
}
You can achieve this with simply adding object-fit: cover;. An example might be like -
img {
height: 300px
width: 100%;
object-fit: cover;
}
I would forget setting the min-height and the max-height. Just set the height to be 300 pixels and put an overflow hidden on the div tag. That way no matter what the image size it will always stay in proportion and never go outside the boundaries of your div tag.
div { height: 300px; width: 300px; overflow: hidden; }
img { height: 300px; }
Put the image as the div background if you want to avoid stretching the easiest way (yet maintain the original width).
To make it more flexible as just using 300px use:
img {
width: 100%;
object-fit: cover;
}
Height is automatically adjusted
just specify max-width 100% and height :auto
Use max-width instead of min-width, and just set height to 300px (or only use max-height).
You can use overflow:hidden to hide any portion of the image outside of the width of the div.
div {
height: 300px;
width: 300px;
overflow: hidden;
}
img {
/*min-width: 300px;*/
height: 300px;
}
==>If you are gonna have fixed height and don't want width stretched
div {
height: 300px;
width: 300px;
overflow: hidden;
}
img {
height: 300px
}
==>If you are gonna have fixed width and don't want height stretched
div {
height: 300px;
width: 300px;
overflow: hidden;
}
img {
width: 300px
}
After giving the image a fixed height and width, I added object-fit as below:
img {
width: 300px;
height: 300px;
object-fit: contain;
}
To avoid the image from resizing use:
object-fit: none;
More about object-fit
The CSS object-fit property is used to specify how an or
should be resized to fit its container.
This property tells the content to fill the container in a variety of
ways; such as "preserve that aspect ratio" or "stretch up and take up
as much space as possible".
Object-fit Values
fill: this is default. The image is resized to fill the given
dimension. If necessary, the image will be stretched or squished to
fit.
contain: the image keeps its aspect ratio, but is resized to fit within the given dimension
cover: the image keeps its aspect ratio and fills the given dimension. The image will be clipped to fit
none: the image is not resized scale-down - the image is scaled down to the smallest version of none or contain.
More info and examples
I'm adding this to expand on the answers given since some of the answers given like adding width:100% height:auto" etc., will still technically stretch Images and/or make them blurry at times. Let me explain.
I work on a lot of eCommerce websites adding products etc and image stretching/blurring is always a problem. Most times, an image scaling down isn't that much of a issue, so the answers given as far as width:100%; height: auto; etc., work just fine. But there are problems when scaling up if the image's container width is larger than the image's native/normal width.
So for example, if you have an image whose width is 100px, and a div container whose width is 200px, if you add a width:100% and height: auto; to your image randomly, this won't technically "stretch" an image, but it will make it look blurry because you are stretching your image past its normal width.
To fix this, one thing i normally do is something like this, assuming on the desktop, that you have an image that you want to show at its 100% native width with no scaling/stretching/blurring whatsoever, I do something like:
img{
display:block;
margin:0px auto;
width: initial;
height: auto;
}
which keeps my images at their native width with no scaling whatsoever. But then, when an image is going to be seen on a smaller device, I add the same rule block into a media query and do something like:
#media all and (max-width: 1200px){
img{
width:100%;
height:auto;
}
}
What this is effectively saying is "Hey Image, make my image responsive from point A to point B(mobile devices), but once you go from point B to point C (small laptops to desktops where the image fits normally and doesn't need to stretch), make the width equal to its default native width".
Hope this helps. Happy coding everyone.
I've created a really simple modal that allows the content to decrease or expand without running off the page - always leaving 10% margin on the top and bottom. When the page isn't tall enough to contain all the modal content, the entire modal becomes scrollable.
See jsfiddle here
Is it possible, using only CSS, to replicate this behavior but only have the modal body be scrollable, so the header is always fixed. I've tried a few things, but haven't come up with the solution yet. Making the header position: fixed almost works, I have to reposition it over the modal box and then try to add padding to the body so the content is visible under the header, which doesn't budge the scrollbars down. I always prefer to exhaust all the css alternatives before I bind some js to window resize and manually manipulate the body height.
This might be late, but I had to solve a similar issue of fixed header, fluid height, fluid width.
This is how I tackled the issue:
Give your elements a border-box box-sizing. Use a wrapper to center and create a bounding box. This can be a fluid one with min-width and max-width + percentages.
Give your content element an overflow-y of auto and a max-height of 100%;
Use box-sizing:border-box;
The complete code should be something like this:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.modal {
position: fixed;
width: 100%;
height: 100%;
background-color: rgba(0,0,0,0.8);
}
.wrap {
position: relative;
margin: 0 auto;
display: block;
width: 90%;
/* Change the max-width value on a media query breakpoint to make this example more "responsive" */
max-width: 500px;
height: 90%;
padding: 30px;
}
.modal header {
height: 30px;
padding: 0;
color: #FFF;
background-color: #007;
}
.modal .body {
background-color: #FFF;
max-height: 100%;
overflow-y: auto;
}
http://jsfiddle.net/mariomc/EhR7r/
Applying the max-height and overflow-y settings to .body rather than to .wrap...?
Edit 1:
Nothing's turned up so far within the constraints, which suggests either JavaScript or straying from the constraints (using % for the header height or px margins).
Edit 2:
Here's an initial demo using % for the header height. I added a px min-height to the header tag to prevent the header from almost disappearing on very small screens, at the expense of the top margin (which is reduced on very small screens).
On a screen >= 400px tall, it should work exactly as per the requirements (40px header with 10% height). If the header were reduced in height, it would support slightly-smaller screens (a 30px header with 10% height would support >= 300px screens). Here's a demo with a 30px header.
It's a clumsy solution, but it's the only one that turned up without using JavaScript.
Also, note that I added an h2 and a .content tag and moved the padding:10px; there, to avoid combining % height and padding in the same elements (which leads to a taller height than the % value specified).
I am trying (if it is at all possible) to use css to make an image 100% the width of a fluid div, but as the images are square (and will be distorted if not square) I want to be able to match the height to the width... for fluid width I am using:
.img{
max-width: 100%;
width: 100%;
min-width: 400px;
}
which works fine for setting the width on all major browsers, but I just cant figure out how to match the height to the width :/
Try throwing in height:auto into your class.
.img{
max-width: 100%;
width: 100%;
min-width: 400px;
height: auto; // <-- add me
}
As mentioned in the comments though, most browsers should be adjusting and scaling the images correctly. But glad this could help.
Now, with CSS3 there is new units that are measured relative to the viewport, (browser window), if you want a fluid image with respect to the window this it works better in most use cases than "%". These are vh and vw, which measure viewport height and width, respectively.
.img{
max-width: 100vw;
width: 100vw;
min-width: 400px;
height: auto;
}