Are You Making These CSS Height Mistakes?

Not gonna lie, height in CSS is cursed.

you can set height: 100% for body and html, it is widely supported and basically works as a dvh

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 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.

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!

فعلا انت مبرمج رائع ولا اعرف كيف اشكر جهودك انا حاليا اتعلم من قناتك كل الشكر لك عاشت ايدك يا بطل

The caption says ”AIDS and CSS are incrediby painful to deal with”… 😮

dvh was new to me. Thank you very much for this video! You saved me some JS on page sizing!

The most helpful video in my css career until now :)

Just put height 100% on the and tags... Great tut though...

Man... you're so such a hero that I'm beginning to feel less and less angry about your beauty

Those CSS cheat sheets are really useful, thanks!

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.

Thank you so much for clarifying these concepts. This really helps!

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.

Nice trick with the flexbox. Thx Kyle! 👌

That is exactly what I needed to know! Thank you so much:)

Thanks! And what about making video about another cursed theme, selecting nth-element using css?

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?

I wish tailwind offered better height options. I have constant height issues especially with scroll bar chopping the end of my divs off.