Are You Making These CSS Height Mistakes?
Комментарии:
This randomly popped into my feed, and answered every issue I ran into with a very cursed project a while ago. I just wish I watched this sooner, I’d have more hair left 🥲
Ответить
Thanks
Ответить
ধন্যবাদ
Ответить
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.
Ответить
Great video! I didn't know that dvh existed! :0
Ответить
are you saying "AIDS and CSS are incredibly painful" at the start, because cc thinks you are and now I do
Ответить
My body certainly takes up too much space. But I've been trying to lose weight!
Ответить
Thank you,finaly found
Ответить
But 100 vh will work
Ответить
shouldn't flex-grow be inside of a child of display:flex? for example, <div style="display:'flex'"><div style="'flexGrow:'1'}></div></div> ? but in the video, it seems flex-grow is in the body tag and therefore is not a child of display:flex.
Ответить
Turn on subtitles from the start
Ответить
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 ~
Can you make a video about to test responsive using mobile as you shown in this video in detail? thanks.
Ответить
tu é um anjo na terra valeu!!!
Ответить
Thank you i solve a problem of vh height with this video ❤️❤️
Ответить
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.
Ответить
LMFAOOOOOOO the auto caption interpreted your first line as "AIDS and CSS are incredibly painful to deal with"
Ответить
height needs to be removed from css lol
Ответить
I think vh and vw work
Ответить
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.
Ответить
This solves my lingering problem. Thanks Kyle
Ответить
Those CSS cheat sheets are really useful, thanks!
Ответить
This was definitely Web Dev Overcomplicated this time.
html and body to height: 100%; and you are good to go 😉
Height: 100vh
Ответить
Hello thx for your awesome work! What about svh & lvh? Currently poorly supported but maybe in the future :D
Ответить
dvh was new to me. Thank you very much for this video! You saved me some JS on page sizing!
Ответить
What height setting did you use for your hair? Looks amazing LOL.
Ответить
I have nicer guitars. 😝
Ответить
👍👍👍
Ответить
thx
Ответить
Love it 💕
Ответить
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.
Ответить
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.
Ответить
Just put height 100% on the <html> and <body> tags... Great tut though...
Ответить
Thank you so much for clarifying these concepts. This really helps!
Ответить
I wish tailwind offered better height options. I have constant height issues especially with scroll bar chopping the end of my divs off.
Ответить
"Hovering over the top of my body" - I thought you died for a second there :D
Ответить
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
do you have a tutorial on how to center an element on screen may be vertical or horizonal?
Ответить
on the first example just use hieght: 100vh ! important;!!!!!
Ответить
Thanks, very userfull hints.
Ответить
Just don't forget to declare height on parent elements. And don't use "vh".
Ответить
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);
}
Huh, "dvh" was blown my brain 🤯 cool!
Ответить
thank you kyle, very useful
Ответить
Thanks 😊 bro 🙏, I learned something new today
Ответить
That is exactly what I needed to know! Thank you so much:)
Ответить
