Are You Making These CSS Height Mistakes?
Вставка
- Опубліковано 17 чер 2024
- FREE CSS Selector Cheat Sheet: webdevsimplified.com/specific...
Heights in CSS are a pain to deal with. They almost never work as you expect and they always seem to be larger or smaller than you want them to be. In this video I will show you why things like height: 100% do not work like you expect and what you can do to make them work.
📚 Materials/References:
FREE CSS Selector Cheat Sheet: webdevsimplified.com/specific...
Mobile Phone Dev Tools Video: • Learn JavaScript Touch...
Viewport Units Video: • Learn Every CSS Viewpo...
Viewport Units Article: blog.webdevsimplified.com/202...
Flexbox Video: • Learn Flexbox in 15 Mi...
Flexbox Article: blog.webdevsimplified.com/202...
🌎 Find Me Here:
My Blog: blog.webdevsimplified.com
My Courses: courses.webdevsimplified.com
Patreon: / webdevsimplified
Twitter: / devsimplified
Discord: / discord
GitHub: github.com/WebDevSimplified
CodePen: codepen.io/WebDevSimplified
⏱️ Timestamps:
00:00 - Introduction
00:31 - Example 1 - Fill Full Page
05:20 - Example 2 - Fill Remaining Space
#CSSHeight #WDS #CSS
Not gonna lie, height in CSS is cursed.
true😂
@@Amar11115 Not really. If you set html and body to height 100%, this ends up working very well on mobile. Height in CSS works fine, you just need to understand how it works :) there is a lot of CSS overcomplexity out there! You don't need dvh 99% of the time
100vh on mobile = migraine.
mobile height is cursed
@@outpost31737 I did that on my website 2 years back and thought I will have to live with it forever.
the flex grow trick thoughhhh omggg, you're a legend, I've always found ways around the height but this one never occured to me, big thanks.
Thank you so much for clarifying these concepts. This really helps!
you can set height: 100% for body and html, it is widely supported and basically works as a dvh
I hundred percent agree with that. That's what I do too
This is the right answer. Why doing things so complicated if a solution exists. For a beginner in CSS this video is not the best to begin.
@@groovebird812 just use 100dvh instead of 100%. It’s not that hard
That's what I do xD
@Federico R dvh isnt supported many browsers yet unfortunately
That is exactly what I needed to know! Thank you so much:)
dvh was new to me. Thank you very much for this video! You saved me some JS on page sizing!
Those CSS cheat sheets are really useful, thanks!
Nice trick with the flexbox. Thx Kyle! 👌
Very useful video, thanks Kyle ❤️
This pain with heights in CSS is related to how web pages in general are vertical scrolling by default. In any other application UI framework, such as mobile (Native iOS, Android, RN, Flutter, et al), or desktop (like FX, Qt or Swing), the base behaviour takes into account the full viewport as defined by the device (or window dimensions), and scrolling is opt-in on a per element/component/view basis. I ran into this issue whilst building out an Electron application where I wanted to emulate the desktop experience by making the main DIV a viewport height of 100%, and adding in components that had internal scrolling. It was very difficult to define, say, a view that would have scrolling content on a non-scrolling page that would take up the remaining space in its respective column. It was a YUUUGE pain in the arse, and I never did iron out all the CSS bugs. Mind you, I built this using flex box when it was sort of new. I'd imagine if I needed to do something similar in the future, CSS grid would be more helpful in this regard.
The most helpful video in my css career until now :)
I appreciate you making this video... Thanks
thank you kyle, very useful
This is what I often lack. thank you for sharing
Thanks 😊 bro 🙏, I learned something new today
Thanks, very userfull hints.
Flex-grow is really quite a useful little item but generally not the first thing one thinks of in these situations. Thanks for the tip!
I'm not sure if there's one that knows about 'dvh' and 'flex-grow's like even if you build gamey-website-frontend you would rather use some library or premade codes found on google.
Like everytime it comes to CSS i'm like "this is the last video i'll ever need" and i start styling and nothing is as expected
... or what the video taught me how it works, once things gets complicated, a wraps them ... BOOM WELCOME TO HELL! 🤣
This solves my lingering problem. Thanks Kyle
Thanks Kyle! 👍
Thanks! And what about making video about another cursed theme, selecting nth-element using css?
فعلا انت مبرمج رائع ولا اعرف كيف اشكر جهودك انا حاليا اتعلم من قناتك كل الشكر لك عاشت ايدك يا بطل
Glad I kept watching I knew and use everything he talked about except dvh, will have to take a look at beacuse RWD can be a pain in the ass with heights and widths sometimes.
Such great content
I would love to see some videos on tailwindcss, some tips and tricks ect.
Great video! I didn't know that dvh existed! :0
Man... you're so such a hero that I'm beginning to feel less and less angry about your beauty
man, thanks! CSS is crazy sometimes
tu é um anjo na terra valeu!!!
Hello thx for your awesome work! What about svh & lvh? Currently poorly supported but maybe in the future :D
Huh, "dvh" was blown my brain 🤯 cool!
Works good if you dont want the .card to be the height of the screen. For that, I use min-height: calc(100dhv - 10rem); The rem is the height of the header and footer.
I like height vh, it's very adaptable for some things. It needs a max height to stop it from being too big, and it causes weirdness if you adjust window height back and forth but the only people who do the are web designers.
I wish tailwind offered better height options. I have constant height issues especially with scroll bar chopping the end of my divs off.
What height setting did you use for your hair? Looks amazing LOL.
Thank you i solve a problem of vh height with this video ❤️❤️
Can you make a video about to test responsive using mobile as you shown in this video in detail? thanks.
Off topic: Web stores differ in how the behave upon navigation back (like: from a product view back to the gallery view which you have scrolled down a lot). Some do restore original scroll position, some don't, some frameworks provide settings on the router to control that, but what are the browser defaults, what can a dev do to effect this behavior? I'd be curious to hear you talk about it.
Thank you,finaly found
What about setting both html and body to a height of 100%? Or using grid, with the actual size of the card head and footer and using auto for the body?
Thanks bro
do you have a tutorial on how to center an element on screen may be vertical or horizonal?
This was definitely Web Dev Overcomplicated this time.
html and body to height: 100%; and you are good to go 😉
maan gye guru aap ko🙏🙏
Thanks
dvh is sure great, but it still has a weak browser support. great video tho 🤗
The caption says ”AIDS and CSS are incrediby painful to deal with”… 😮
Can you make video about orm sequelize and plus cheat sheet?
Just put height 100% on the and tags... Great tut though...
You are a legend
Love it 💕
very useful video, thank you
if i may have a question, because its not clear for me
why the body background-color fills up the whole page if the body actually isnt that high?
That is just how css was made. I think they did this since there was no way to make something fill the full viewport height when css was first created.
@@WebDevSimplified from the CSS W3 spec:
"The background of the root element becomes the background of the canvas and covers the entire canvas, anchored (for 'background-position') at the same point as it would be if it was painted only for the root element itself. The root element does not paint this background again. "
but I thought the html element is the root element, right..? like the :root selector? So I thought I might ask ChatGPT for an answer:
Me: "hi ChatGPT, the spec indicates that the root element's background overflows and becomes the background for the whole canvas. If the html element is the root, not the body, why does applying a background to the body set the background color for the whole canvas, even if the body doesn't fill the canvas?"
ChatGPT: "You are correct that the HTML element is the root element and not the body element. However, in most cases, the body element is the containing block for the entire document and covers the entire canvas. Therefore, when you set a background color or image on the body element, it effectively becomes the background of the canvas. To be more precise, when you set a background on the body element, the browser will render it as the background for the body element and will also propagate it to the viewport (which is the visible portion of the canvas) and any areas outside of the body element. This is because the body element fills the entire viewport by default, so the background applied to it will cover the entire canvas. So while the root element technically overflows and becomes the background for the whole canvas, in practice, the body element is usually used as the containing block and has the same effect.
**So, TL;DR: it's all about the containing block of the element with the background**
But ChatGPT said "*in most cases* the body element is the containing block for the whole document". So I asked a follow up:
Me: "show me a case where setting a background on the body will not cause propagation to the html element"
ChatGPT: "One case where setting a background on the body element will not cause propagation to the html element is when the html element has a fixed height and the body element's height is set to 100%."
"In this case, the body element will only take up the height of its content, which may be smaller than the height of the html element. As a result, the background set on the body element will only cover the area within the body element and will not propagate to the html element."
"Here is an example of CSS code that demonstrates this:"
``` css
html {
height: 500px;
background-color: blue;
}
body {
height: 100%;
background-color: red;
}
```
"
(end chatGPT)
This was a cool little rabbit hole to go down :)
Grate video! One caviat the use of .body class was a little confuse with actual body tag. Again grate video!
thx
1:05 the body isn't taking up the whole height though, it's as large as the div content. if you set both div and body to 100%, it will work since the html itself takes up the whole height
Codepen please
"Hovering over the top of my body" - I thought you died for a second there :D
When I saw the title and thumbnail my answer was "Yes" xd
I read this cool hack on css tricks where u can use { position: sticky; top: 100vh; } on the footer and it sends the footer to the end always. I think its cool addition to this video.
'Scaled/Proportional Content with CSS and JavaScript' is an interesting blog to walk through, if you need any content.
7:33 what's with the flex-grow: 1, why did the Footer's whitespace's gone?
I also suspect the goal was to move Header to the most-bottom-possible and a fix would be to set min-height: 100px to the .footer yes?
Still think that this is a bug in CSS. If the height of the body only makes up a certain amount of percentage/pixels/gummy bear units of the window, then so should the background...
Just don't forget to declare height on parent elements. And don't use "vh".
Can you please make a video on aws cloudfront signed cookies to serve private images and videos in nodejs server and reactjs front end.
There is not content related this topic. 🙏
Hi Kyle, I want to take your CSS course. Just want to know what will be the subscription period of the course?
The course is lifetime access.
In second example, what should i do to ensure that card height doesn't grow beyond 600px and if the body has a lot of content I get a scroll bar?
god I needed this
You can always use height: 100% for everything containing your wrapper, instead of whatever the broken viewport unit of the year is
Hi Nice video!,
i've been using the flex-grow, but I have a problem, how can we make the body of the card to have a scrollbar when the content exceeds the min-height?
as you showed in the video it will expand the card and in my use case I don't want that. I want it to fill the remaining height but when the content gets higher than the min-height I want it to have a scrollbar. I've tried to set the scroll-y to scroll but it doesn't work.
Thanks
if you don't want the container to go beyond a certain height then you should go with height instead of min-height, or use max-height alongside min-height. when the content goes beyond the limit of the container it will 'overflow' and act based upon the overflow property, which in your case for showing scrollbar it should be auto (default) or scroll
@@khaledd453 Whoa, thanks a lot for replying my comment man, appreciated it.
Whaaaat!?!? F@c#ing "dvh"?!?!?!
Oh my Binary! Where has it been all those years?!?!
I've just checked it out, and found out that in 2022 css got: svh, lvh, dvh, svw, lvw, and dvw..
FINALLY no more dealing with that address bar nighmare! ^_^
You just changed my life! Thanks brother!
ধন্যবাদ
you just have saved my ass
The child element will take the 100% available height of the parent element, so we should first specify a height for parent element otherwise it will not work.
The behavior of the body-height is very weird (Minute 2:20): It has height of 400px, you can see this because of the blue-border, but the background-color which is #333 fills the entire screen. So the body is 400px height, but on the same time it is also 100% height.
In the last example, instead of using flex, can you just use position: relative on the footer and give it bottom: 0? I’m not on my computer but I think it should work. And give position: relative on the card aswell so the bottom is referred to that
This is cool with three divs, what happens when you need more columns and rows inside the body
Use the body as a flex container or use grid. Grid-template-area is good for this
@@adamuk73 i love grid just forgot a lot 😭 been mostly building financial apps
can you provide us the codepen ?
Using flex to solve header footer issue seems like hack or overkill. Surely the Html standard people must have encountered this issue.
My body certainly takes up too much space. But I've been trying to lose weight!
Turn on subtitles from the start
Kyle I think you forgot to put the video card on 3:34
3:30
Maybe just use 100% svh? Instead dvh for mobile responsivness
The only reason why i feel frontend is hard because of this styling stuff
I think once you get your head around positioning and the box model CSS becomes less intimidating
I like your videos, but one thing i get confused about is, your mimic always has this glow in your eyes and this slightly smile on your face that kinda tells : HEY THE WORLD IS AWESOME AND EVERYTHING IS EXCITING. But your voice is monotone perfect to sleep along with and tells something like : lets calmly talk about an interesting topic that i just found in a newspaper.
This contrast is wired, but unique what is good ~
I think vh and vw work
0
LMFAOOOOOOO the auto caption interpreted your first line as "AIDS and CSS are incredibly painful to deal with"
shouldn't flex-grow be inside of a child of display:flex? for example,
👍👍👍
Why not setting for both html and body 100% instead of making things this much complicated?
const vh = window.innerHeight * 0.01;
document.documentElement.style.setProperty('--vh', `${vh}px`);
$(window).on('resize', function () {
var vh = window.innerHeight * 0.01;
document.documentElement.style.setProperty('--vh', `${vh}px`);
});
.inner {
height: calc(var(--vh, 1vh) * 100);
}
Height: 100vh
Flex grow 1
height:100vh;
height:100dvh;
1:06 I can only see your head
But 100 vh will work
Remember 100% of its parent
are you saying "AIDS and CSS are incredibly painful" at the start, because cc thinks you are and now I do
height needs to be removed from css lol
I have nicer guitars. 😝
I do worry about you. Your rooms always look sparsely decorated with very little furniture. I hope you are not sofa-surfing :)
Too much water, video could be 1 minute of time