What's the deal with height: auto?

[@CodingNuggets]

Love when you cover anything CSS. I feel like I level up a little with each video. Thanks Kevin!

[@kaanergunlu7836]

Good to know that I'm not alone :))

[@jeevanprakash5482]

@@kaanergunlu7836 bro but without using height how do i set my div's a particular height?

[@volodymyr2187]

@@jeevanprakash5482 Use paddings or set width / height in pixels. The first thing is commonly used in dynamic divs, which can change their height. And setting size in pixels is used for divs, which should be of a fixed size in any circumstances.

[@adithyas6863]

Ever since I've subscribed, it seems I am getting more and more better at CSS, please keep this up! RESPECT 100

[@TKYasser]

Daamn, I'm sure you are better with CSS than the CSS creator himself xD

[@modelshipwrights]

As usual I sort of know this but it's great to have it all confirmed and clarified - and also as usual (shouldn't be surprised by now) learnt some stuff I didn't know. Great stuff Kevin - keep 'em coming!

[@levelasian1608]

Hey Kevin, great video! It would be great to see that video about the behavior of height/ width: auto in a Flexbox/ grid context !!!

[@jeevanprakash5482]

bro but without using height how do i set my div's a particular height?

[@louisgamor]

Kevin is undeniably the BEST. He's like the Boyka in the CSS Ring 😍

[@elahhaz1047]

Thanks for making these videos, very good at explaining what properties are and what they do, with simple examples .. too many makes videos are focused on a design goal and what (multiple) css properties to use for that, rather than what individual property does, those gets complex by default and harder to wrap your head around, why they get the result that they do. So Thank You!

[@KevinPowell]

Thanks for the kind words, really glad that you like my approach with these!

[@somnvm37]

Questoin of the day: When percentages are counted from body size (body of the element) And when from the size of parent element. Usually that's not a problem, I just change display, but it's impoertant to know

[@mohan9285]

You simplify the complex topics and makes very easy to understand :)

[@OmniscientIgnorance]

You really are the CSS king! Love your videos so much.

[@Minu_Shalom]

Hi Kevin! Thank you for this perfectly explained topic. I would be excited to watch a video from you about how to set a border with a radius and linear-gradient for a form input element. Keep up your excellent work :)

[@ragnarlothbrook8117]

Useful stuff. I really dig this kind of short and 'to the point' vids you make.

[@otmanm4095]

I really love these kind of videos. Really thanks for all the content.

[@KevinPowell]

glad you like my content :D

[@venkatmani7167]

It is really wonderful to see your explanation which will clear lot of questions around min-height and height.

[@PatrikKulisek]

A lot of people could get the impression that 'height' is useless, but some years ago when responsive websites wasn't a thing it was acually used a lot for layouts. Today it is widely used in styling of printed documents when you know what dimensions of 'paper' are.

[@antjeplatte144]

I looked in a lot of sites to understand that, but here I found the answer :-) Next time, I will look in your channel first!

[@ne9835]

Thanks! I was running into some problem with heights, thanks for clearing things up for me!

[@KevinPowell]

Awesome, glad that you're enjoying my content.

[@resty1672]

Always get indepth pro tips from your channel,big thank!

[@matrixdeterminant3629]

Thanks Kevin!!! Your videos are extremely helpful!

[@fahimmahmud3115]

Hi Kevin, first a big big big thank you for everything! Then, your line when you showed that the body is actually the area with all the contents and not the entire viewport was a eye-opener for me. I have always thought that the whole browser window was the body because setting the background-color to body would fill up the whole viewport. But you said that it overflows with that border example. This helped me with one of my problem with centering an element.

[@abdillahsyafiq]

I just discovered your channel and now I'm limiting the video I watch from your channel to prevent overwhelming new css knowledge.

[@KevinPowell]

Haha, welcome aboard!

[@VasilyPavlik]

Excellent. Very useful for beginners and not only for them. Kevin, your hair has "height: auto" after quarantine :)

[@KevinPowell]

haha, totally. I think this is my last video before my haircut, lol.

[@benzflynn]

*TWO CLARIFICATIONS:* *1. Width of **_block elements_** defaults to 100%. Width of **_inline elements_** defaults to auto. Height of elements always default to auto. Yet this doesn't mean you can **_always_** leave out any explicit assignment to them and expect them to render as 100% or auto anyway.* Because all websites today are responsive, an element whose width/height was left to default to auto may not render as such _because another width/height assignment inherited from a smaller screen size is automatically applied._ For example, the primary (i.e. mobile) CSS assigned to an element containing both a logo and logotype may be set to width: 100%. Without assigning this element a width at higher screen sizes, we still get the full screen width for this element - regardless of having it within a flexbox and having enough screen width for a navbar as well. To overwrite this "inherited" width/height value, we have to *expressly assign* _width/height: auto;_ in the @media code for this element at the larger screen size. The only place to _safely_ leave out assignment of width or height is in elements like _body_ or higher-level container elements where you can clearly see that things won't change with device size. *2. Always assign sizing to at least one dimension of a container element for an image whose element is not dimensioned.* Images are not like text which have a specific (or default) font-size which always gives text a set size. Images need a box of defined size before they can start to render. So if you intend using auto width/height on a container for images, be sure to put a width or height in your element. Since images usually need to be able to expand or shrink with screen size/orientation, it is easier in practice to dimension the containing element for the image and make the image width say 100% of this.

[@yousif2712]

Great video! Keep the pink background next time please, easier on the eyes haha

[@WojciechKobus]

You're doing a good job. Thanx for input.

[@sebacamposdev]

thanks for the video. And yeah this video needs a part 2 with grid and flexbox

[@SudeeptoDutta]

Hi Kevin. Can you make a video on table styling ? How to manage table cells width for uneven cells in header and body of the table ? Also the best way to set a height on table.

[@KevinPowell]

I hate tables, lol. I'll have to build up some courage to work on that :D

[@SudeeptoDutta]

@@KevinPowell Haha. I hope that day comes soon 😄

[@delulu6969]

I use colspan attribute on . Another project, I used grid, the css might get messy but you have a lot of control. At times, I feel like wanting to give up and make everything divs. Just my 2 cents.

[@SudeeptoDutta]

@@delulu6969 Thanks for the suggestions.

[@1998Hagis]

You could show the mix of min-height: 100px; and max-height:100%; That is a great connections!

[@ali-celebi]

Great explanation! Quality content as usual :)

[@diegoraffa4324]

Hi Kevin! You are awesome! Looking forward your live on Scrimba and your Sass course in future.😁

[@hopeofglory8108]

Great video :) Would be nice to have a little codepen for this to play around with now, want to experiment with combos of height: auto on the body, etc!

[@LorenHelgeson]

I rarely use a fixed height. I liken it's valid usability back to the old days when designs were table based, and as a transition from those layouts to the modern fluidity.

[@tomengelmann7272]

I recently had some projects where max height was pretty useful. Think its rarely used but also powerful

[@DrHappybone]

That was really well explained, dude!

[@KevinPowell]

Thanks!

[@SnSungod7]

Thank you that really helped me clear lot of my doubts

[@guillermoandradaFSD]

It was easy before this video but you made it easier that time... Txs a lot

[@theshredguitarist25]

1:54 so helpful!

[@twanasoftwareengineer1754]

" Percentage of height is always percentage of the parent " ❤

[@lestherxm]

Finally, I'm able to don't overflow the text on my containers, lol

[@TheLuckyyy13]

Can you do a video on images? Like how to know beforehand how an image will look on a site, sizes, how to adjust which part of an image to show, responsive images etc.

[@jayjohn3634]

Hey man, I am loving the videos!

[@mikehenry01]

This was great, but I was hoping you would've touched on the problems with using height:100% and the criteria required to make it work. Frankly, I'm stumped. My scenario: In addition to the element in question that I want to be height:100%, I have its direct parent, grandparent (there are no other intervening HTML elements), AND elements all set to height:100%, but it's not working. Ugh. I'm baffled. I feel like I'm missing something super simple....

[@SUKI12809]

Thanks you, new knowledge about CSS.

[@80Vikram]

Cool hairstyle Kevin, who is your barber ?

[@linh92nguyen53]

so touching for an excellent video

[@TristanGrimaux]

"And we can see that we have that red border there, that's my body". Best line ever

[@theartofwarren]

Nice bite-size tidbit-thanks!

[@venkatanagasai1579]

Sure this video gonna help me. Thanks sir..

[@jamaluddin9158]

Great informative videos kevin! I had a question on height in percentage. Does it refer to the height of the parent's content or content+padding+border and does box-sizing on parent affect that? I probably can test it out myself but I'm feeling lazy right now and also I would like your stance on it 😅

[@procrastinator24]

great video, thank you so much!

[@Aabara_ka_dabara]

thankyou for this video. it really helped me to understand this

[@johanjong7208]

Hey Kevin, height can be essential when dealing with CLS. By the way, it would be nice if you could tell us how you deal with CLS problems.

[@fah199990]

I love css !! And i like you video

[@itallovidal9383]

I would like to see a video of you explaining how to deal with height in general and why we cannot use % in heigh like we use in width. I struggle so much with this * Have not watched this video you posted yet

[@KevinPowell]

It might answer most of your questions about it :)

[@justnevergiveup6761]

You're the best, Thanks.

[@TytusDubel]

thank You Kevin

[@vivekv4250]

Love your videos.. love from India

[@mushfiqursorol6667]

Sir Your Very Good Explainer When You Covered Something Hurd Things Be Come Esay And Simple Thank You Sir

[@pavankumarvangala2548]

Hi Kevin , Can you please make a video on Display options like flex, grid , inline-flex etc.. Thanks in advance

[@venkatesh2788]

Please make SEO full course with projects

[@avananana]

CSS is one of those things that are just filled with stupid inconsistencies just because it makes sense in a single situation. My god.

[@hnccox]

From now on, I am going to set the body always to a min-height of 100vh

[@quickcodingtuts]

Also you can't do transitions from a certain height to auto, which kinda sucks :/

[@KevinPowell]

Yes! And yeah, it's annoying, but it's because the content controls it, and any change to the viewport can change the height of the element, so the browser doesn't know how tall 'auto' is without first rendering it.

[@fentFloyd]

Very nice!

[@shahbazkhalid6950]

Kindly makes videos on these topics Vanilla JS , Bootstrap 5, Gradients & functions in CSS3 and when to use gradients and function,

[@M25962]

Thanks for your work Kevin. Q: How can I center vertically an icon inside a container? I recently had to do this for some homework but I feel like I hard coded it because had to be super specific on the numbers I set.

[@kapall3021]

im new too but u can put .container{ display: flex; align-items: center; }

[@sxmvp]

Maybe a dumb question, but how would you go about centering something vertically if you don't have a set height size?

[@lambo-ca]

Thanks man.

[@yuli3873]

1:06 can someone throw some insight regarding why does that happen? I mean, the border seems to indicate where the body ends, but the background kinds of "overflow" it. Why is that? Wouldn't the background be limited itself to the border boundings?

[@samithraniroshana4089]

Very very very useful ❤

[@truedivan]

Thank you!)

[@vasilemidrigan50]

Thanks a lot!!!

[@brianjett1446]

What is the difference between max-hight and min-hight?

[@awekeningbro1207]

isn't 'auto' the default value of height?

[@RubberDuckCoding]

VERY NICE!

[@PC-tk7uv]

whats the diffence between height auto and not setting the height at all

[@mohitpandit3041]

Thanks for explain it.. But no need to set height : auto. By default every elements have height auto

[@misterhtmlcss]

Perfect for those riders that we add e.g. announcing version 1.x.x. click here to learn more. I can now add that in and it'll appear whenever there is content. This is also great for forms where you might have a tool tip. Great timing actually because there is no tool tips on our app and I'm building them today and this is the perfect rule for what I have planned.

[@KarimShalapy]

Heights have the same rules for ?

[@kunited9]

Great explanation

[@KevinPowell]

Glad you enjoyed it

[@mdtajbirhossain8228]

Is there any different between auto and fit-content?

[@kallekula9202]

Then what's the different between heigh auto and height fit-content?

[@nj5195]

Can you please give an example of a horizontal card blog with text content and thumbnail width:650px and height:500px? I can't do it to be responsive.

[@onesandzeroes]

Is there a difference between setting height to auto, and not setting it at all? Because from what I see height:auto is just the default behaviour.

[@arthurdoomer]

.yourHair { auto; } Hehehe Thanks for the amazing css content!

[@jonasjo9091]

hey CSS master , Please do video about fluid images (responsive images)

[@Septenien]

For the old sticky footer solution with a fixed height, I very often see a solution with height: auto; min-height: 100%; for the wrapper. Do you know why there is this additional height: auto? I think min-height should be enough, especially because auto is the default, right? Is it for old browsers? Maybe you have a link for me or some reason, can't figure this out :(

[@maddancing]

Just asking for clarification, 3:50 it's stuck at 500px right?

[@SauloQuirino]

Excellent vídeo

[@Pareshbpatel]

Thanks for sharing your CSS knowledge, Kenin {2023-01-10}

[@SurajKumar-tn7ne]

height: auto is cool but min-height: 100vh is awesome

[@gerhardsteenkamp562]

Is height:auto the same as height:fit-content ??

[@sandeepbhambre]

at 1:09, how the pink background color of the body overflow to fill the viewport??? please explain.

[@KevinPowell]

It's just the way background works on body, as I said, a bit of a quirk. I should have also shown how it works with images and gradients, because it gets a bit more strange in those situations

[@minecrafthowtodude]

But what about images

[@Haibrayn42]

You want to set a height when you want to have a scroll when overflowing instead of the content growing indefinitely, like the youtube playlist here ->

[@nick_jacob]

I already knew this. I'm not sure why I'm here. Procrastination maybe?

[@petropzqi]

Yeeeeeeeees!!!

[@Chrosam]

IE11... My arch nemesis

[@VITORB82]

Even John Snow would know something CSS with you. 😂

[@kevinniemeyer5938]

It seems to me that you would always want to set your body height to 100% to prevent any problems with any other element using a height of 100%. Am I wrong in assuming that?