CSS CSS Layout Basics Getting Started with CSS Layout Creating a Sticky Footer

Ed Basquill
Ed Basquill
3,984 Points

I am confused on units. This video is doing 100vh - 89px. How many px's are in a vh? How many em's are in a px?

12 inches = 1 foot 3 feet = 1 yard

100vh = ? em 1 em = ? px

How can you subtract 89px from a 100vh? Isn't that "apples and oranges?"

3 Answers

Cooper Runstein
Cooper Runstein
11,786 Points

Both em and vh are relative units, while px are constant. There is no equation to convert in all cases, rather depending on the situation you're in 1vh and 1em will have a pixel value -- but that will change from situation to situation. Imagine a building, vh would be the a fraction of the height, if I have building1, a 100 foot tall building and building2, a 50 foot tall building, both buildings will be 100vh tall, but 1vh on building one would be bigger compared to building two. (1/100th of 100feet is bigger than 1/100th of 50feet). Em could be though of as stories, I can set the height of each story -- 1em will be the same per building, but building1 might have taller floors than building2, or the opposite may be true. Feet though, feet will always be the same. No matter what, 1 px is 1px, just as a foot on building1 is the same as a foot on building2.

To answer the last part of your question, if I have a building that is 100vh tall (as are all buildings), I can take that value and subtract 10 feet from it. For each building, the result may be different, but the operation is valid -- I'll have the original height minus 10 feet. I can always take screen height in vh and point to 20px below the top, even if that will be a different percent of the way down the page, depending on the screen.

Ed Basquill
Ed Basquill
3,984 Points

So if I follow your logic, suppose you have two monitors: monitor 1 is 2048 X 1436 pixels. monitor 2 is 960 X 720. 100vh is 20px for monitor 1 will look like 100vh minus 10px for monitor 2----it won't look the same. Why not always use relative units?

Cooper Runstein
Cooper Runstein
11,786 Points

I'm not sure if I follow your calculations, but yes, they will look different. There are a few reasons not to use relative units, first off, if everything is relative, when you adjust your browsers window size, EVERYTHING will change. That typically doesn't look too great. The other main reason is Javascript, using relative units for layouts is great, until you need to get a position on the screen in JavaScript. It's a lot easier to select the top of your footer when you know it's 100px off the bottom of the page than when it's 20vh from the bottom of the page.

Ed Basquill
Ed Basquill
3,984 Points

I am up to the point in my Treehouse training where I am doing a 47 minute class on CSS layouts for mobile devices and so on --- more or less the whole class answers this question. Things are evolving to account for different devices, and you can't make them all precisely the same. They are introducing flex boxes

Ed Basquill
Ed Basquill
3,984 Points

The video was made in early 2015 and said that flex boxes as a design feature were going to be the next thing, but many browsers couldn't handle them. It is late 2018. Is that still true?

Cooper Runstein
Cooper Runstein
11,786 Points

Flexbox is pretty standard now, and CSS Grid is pretty close to it as well. There are some minor issues on browsers like Internet Explorer, but for the most part you can use these without issue.

https://caniuse.com/#feat=flexbox This site is a really good resource for questions like this.