Are You Making These CSS Height Mistakes?

AIDS and CSS are incredibly painful to deal with especially when you want something to take up 100 height because almost always if you specify a height of 100 it does not do what you expect oftentimes it seems like it doesn't even do anything at all or makes the element way too large in this video I'm going to show you exactly why that is and what you can do instead of height 100 percent [Music] welcome back to web dev simplified my name is Kyle and my job is to simplify the web for you so you can start building your dream project sooner and in this video I have two separate examples that I'm going to be going through to show you how height 100 works why it doesn't work like you expect and to show you what you can do instead of using height 100 in both of these different scenarios so the very first scenario I wanted to get started with is going to be the most common when you have a page and you want your element to be the full height of the page oftentimes you'll see this I have a single div inside my body and right now it has a background color of coral and you can see my body has this dark black gray kind of background color if I come in here and I set this to be a height of 100 you may think okay it should fill the whole Space because as you can see my body is this black section my div is inside my body so obviously 100 of that it should fill the full space when I save you notice nothing at all happens the reason for this is kind of counterintuitive and that's because even though the background of my body fills the entirety of my screen size it doesn't actually take up the full space of my screen if I actually inspect my page and I go over to the console real quick or sorry the elements tab I hover over my body if I just zoom this in it'll be a little easier for you to see if I'm hovering over top of my body you can see on the right that blue section that's being highlighted is just the same size as my div and that's because the body element in CSS by default just takes up the height of whatever is inside of it we can see this really easily if I just give this a border we'll say like 10 pixels solid red would make it blue so it's a little bit easier to see you can see we have this giant blue border around our element and that's because that is the size of our body our body just takes up whatever space we give it I could make my body a specific height by saying like height 400 pixels now you can see that the orange area has filled that entire height that's because the way height 100 works is it just fills up whatever space the parent takes up in our case the body is taking up 400 pixels so this full screen div is also going to be 400 pixels tall now the reason that this body doesn't take up more space than this 400 pixels or whatever space it has by default based on the content inside of it is because pretty much every single element in CSS has a default height of Auto and if an element has a height of Auto all that is this going to take up the minimum amount of height possible based on the content inside of it so if I start adding more and more text inside of here and I save you can see my height is going to grow to fit the minimum amount of space needed to get all of my text inside of it and that's what my height is always going to be as long as my height is set to Auto the body has an auto height which is why it's taking up this blue outlined area and then this 100 height is just able to fill up whatever space is based on the parent size now obviously we don't really want this we want it to be the actual size of our screen which is why we have viewport units so if I remove that border and instead I change this to 100 VH now that's saying take up 100 of the viewport height that's what VH stands for but again this is actually going to present us with some interesting problems when we switch over to a mobile device so here I just opened up the dev tools and this is actually running on my phone you can see here I have my phone and when I move on my phone you can see that it's actually moving on my screen so I have it perfectly hooked up to my phone if you want to see how I did this I have a full video on it I'll link in the cards and description for you but you'll notice that I can actually scroll this page and that's because at the very top of your phone you're going to have essentially the address bar that's what this grayed out section up here is representing and when I scroll my phone you can see it showing and hiding that address bar obviously this is a bit of a problem and we can really see this a little bit more if I change my background if I come in here I'm just going to change my background so that the bottom 10 is going to be a black color and now as I scroll you can see that that black section is expanding and shrinking at the very bottom which proves that I can actually scroll my page and again if I show you if you look at my webcam here you can see at the very top of my phone that the address bar is showing and hiding itself and that is the reason that it is scrolling and that's something that's common on pretty much every mobile device now luckily recently CSS introduced a way to get around this by giving you Dynamic viewport height so if I say this is going to be dvh and I save now you'll notice immediately that this black bar is the right height and when I change my page like you'll notice I'm moving my finger I can't actually scroll my page because it's the perfect height it is not allowing me to scroll but if if I were to zoom in my page now I can scroll because obviously I'm zoomed in if I zoom it back out you'll notice that this black section at the bottom is changing its size based on the actual size of my screen so as I show more and more of that URL section that black thing is changing that's what a dynamic viewport unit is doing for us I know this is a little bit of an interesting and complicated way to explain it but if you want to learn more about these different viewport units specifically things like Dynamic viewport units large and small and so on I have an entire video covering them I'll link in the cards and description for you really the main takeaway from this section though is if you want something to take up the full height of your screen as you can see like we've done here what you're going to want to do is you're going to want to use viewport units and most likely you're going to want to use some type of dynamic viewport unit to make sure you take into account the Mobile screen sizes you're dealing with because height 100 is just not going to do it for you now if we move on to the next example if I just close out of this and close out of this you see that if we look at our HTML we just have really simple card syntax where we have a header we have some type of body and then we have a footer and obviously we want our body to fill up the most amount of space in the middle and our header and footer should be on the top and bottom respectively if we look at our CSS Styles here the main things that we have is our card is going to be having a specific height of 600 pixels set on it because we always want it to be 600 pixels tall and this body should just fill up the remaining space and then inside of our header you can see we just have it at the top with some basic styles for some border and background and our body has some basic padding you may think okay I want my height to take up 100 of the remaining space inside my body I'll just set the height to 100 percent when you do that you'll notice something interesting our footer is actually shoved off the bottom of our page if we remove this overflow hidden right here you can actually see our footer is all the way down here pushed to the very bottom and the reason for that is because our body has a height of 100 which means it's 100 of the height of its parent and the parent has a height of 600 pixels what's happening is our body is set to 600 pixels tall which means that this body is 600 pixels tall which is pushing off our footer off the end of our page because our entire Card is only 600 pixels tall and if our body is the same height as our card obviously extra things like our header and our footer are going to be pushed off the bottom of the page which is definitely not what we want also another thing that you may notice that you'll run into is if you specify this as a Min height which is what you should probably do in case your content gets too large and we save you'll now notice that the actual height 100 doesn't do anything at all and it's because it doesn't know what the height of this card is it's just taking into account this minimum height value so it really doesn't know what it needs to do in order to calculate the actual height for our body so this height 100 is just not working at all now to get around this by far the easiest way to do it is going to be using flexbox so what we can do is we can change our card to be a display here of flex we can keep the exact same Min height and everything like we had before and you'll notice now when we do that everything is lined up side by side obviously that's not what we want so we want to change our Flex direction to column hopefully if you do this for the most part things won't change very much based on what you had before so as you can see everything looks exactly the same as it did before but now we're able to make it so that we can have any part of our page take up all the remaining space so inside of our body instead of having height 100 here we can specify the flex grow to be one and that's just saying grow to fill all of the remaining space so now you can see that our body section is filling up all the remaining space while our header and footer are at the top and bottom just like we want them to be and if our content is very large so if we just change this to be very large you'll now notice actually let's just make that a little bit smaller that's a little bit too much there we go you can now notice that this is just pushing down and becoming larger than 600 pixels tall but our footer is still at the bottom and our header is still at the top and even if we change our height here to be like 100 pixels for example so it's really small you can still see it's filling up that extra space because we're using Min height right here but if we don't have enough content to fill that entire space for example like this where we only have a little bit of content you can now see it's filling up all the space because of this Flex grow of one this is a really common problem that I see people run into all the time and I used to run it all the time and flexbox just makes dealing with that so much easier now if you want to learn more about flexbox I have a full video on it I'll link in the cards and description for you and that's all there is to Heights and CSS if you enjoyed this video you're going to love my completely free CSS selector cheat sheet it's going to take your CSS skills to the next level by teaching you every single CSS selector you need to know it's completely free and it's linked down in the description below so I highly recommend you check that out and with that said thank you very much for watching and have a good day

Channel: Web Dev Simplified

Views: 124,070

Keywords: webdevsimplified, css height, height 100%, css height 100%, css height sucks, why does css height 100% not work

Id: -sF5KsEo6gM

Length: 8min 54sec (534 seconds)

Published: Tue Mar 07 2023