Up next in 10
Are You Making These CSS Height Mistakes_
335 views
Feb 7, 2024
The video titled "Are You Making These CSS Height Mistakes?" serves as a guide to common errors encountered when using CSS to define the height of elements within a web page layout. It addresses misconceptions and pitfalls that developers often encounter, offering solutions and best practices to avoid these mistakes. Through clear explanations and practical examples, viewers can learn how to properly manage element heights in CSS, ensuring consistency, responsiveness, and optimal design across various devices and screen sizes. Whether you're a novice or experienced web developer, this video provides valuable insights to improve your CSS coding skills and enhance the overall quality of your web projects.
View Video Transcript
0:00
Heights in CSS are incredibly painful to deal with, especially when you want something
0:04
to take up 100% height, because almost always if you specify a height of 100%, it does not
0:10
do what you expect. Oftentimes, it seems like it doesn't even do anything at all, or makes the element
0:15
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%
0:21
Welcome back to WebDev Simplified. My name's Kyle, and my job is to simplify the web for you
0:30
can start building your dream project sooner. And in this video, I have two separate examples that
0:34
I'm going to be going through to show you how height 100% works, why it doesn't work like you
0:38
expect, and to show you what you can do instead of using height 100% in both of these different
0:43
scenarios. So the very first scenario I want to get started with is going to be the most
0:47
common when you have a page and you want your element to be the full height of the page
0:51
Oftentimes you'll see this. I have a single div inside my body. And right now it has a background
0:56
color of coral. And you can see my body has this dark black, gray kind of background
0:59
color. If I come in here and I set this to be a height of 100%, you may think, okay, it should
1:05
fill the whole space because as you can see, my body is this black section. My div is inside
1:09
my body, so obviously 100% of that it should fill the full space. When I save, you notice nothing
1:14
at all happens. The reason for this is kind of counterintuitive, and that's because even though
1:19
the background of my body fills the entirety of my screen size, it doesn't actually take up the full
1:24
space of my screen. If I actually inspect my page and I go over to the console or click, or sorry
1:29
the elements tab, and I hover over my body, if I just zoom this in, it'll be a little easier for you
1:33
see. If I'm hovering over top of my body, you can see on the right, that blue section
1:37
that's being highlighted is just the same size as my div. And that's because the body element
1:41
in CSS, by default, just takes up the height of whatever is inside of it. We can see this
1:46
really easily, if I just give this a border, we'll say like 10 pixels, solid red, which make it
1:51
blue, so it's a little bit easier to see. You can see we have this giant blue border around
1:55
our element, and that's because that is the size of our body. Our body just takes up whatever
1:58
space we give it. I could make my body a specific height by saying like height 400 pixels
2:04
Now you can see that the orange area has filled that entire height. That's because the way height
2:08
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 take up more space
2:20
than this 400 pixels or whatever space it has by default based on the content inside of it
2:25
is because pretty much every single element in CSS has a default height of auto
2:29
And if an element has a height of auto, all that means is this going to take up the minimum amount of height possible
2:35
based on the content inside of it. So if I start adding more and more text inside of here, and I say if 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
2:49
So 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
2:58
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
3:03
So if I remove that border and instead I change this to 100 VH
3:07
now that's saying take up 100% of the viewport height. That's what VH stands for
3:12
But again, this is actually going to present us with some interesting problems when we switch over to a mobile device
3:18
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
3:23
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
3:28
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
3:31
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
3:38
address bar. That's what this grayed out section up here is representing. And when I scroll my
3:41
phone, you can see it showing and hiding that address bar. Obviously, this is a bit of a problem
3:45
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
3:54
And now, as I scroll, you can see that that black section is expanding and shrinking at the
3:57
very bottom, which proves that I can actually scroll my page. And again, if I show you
4:01
if you look in my webcam here, you can see at the very top of my phone that the address bar
4:06
is showing and hiding itself, and that is the reason that it is scrolling. And that's something
4:09
that's common on pretty much every mobile device. Now luckily, recently CSS introduced a way
4:14
to get around this by giving you dynamic viewport height. So if I say this is going to be DVH
4:19
and I save now you notice immediately that this black bar is the right height And when I change my page like you notice I moving my finger I can actually scroll my page because it the perfect height It is not allowing me to scroll But if I were to zoom in my page now I can scroll because obviously I zoomed in
4:36
If I zoom it back out, you'll notice that this black section at the bottom is changing its size
4:41
based on the actual size of my screen. So as I show more and more of that URL section, that black thing is changing
4:46
That's what a dynamic viewport unit is doing for us. Now, I know this is a little bit of an interesting and complicated way to explain it
4:52
but if you want to learn more about these different viewport units, specifically things like dynamic viewport units, large and small, and so on
4:58
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
5:03
is if you want something to take up the full height of your screen, as you can see like we've done here
5:07
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
5:14
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
5:20
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
5:25
we just have really simple card syntax, where we have a header, we have some type of body
5:29
and then we have a footer. And obviously, we want our body to fill up the most amount of space in the middle
5:34
and our header and footer should be on the top and bottom respectively. If we look at our CSS styles here
5:39
the main things that we have is our card is going to be having a specific height of 600 pixels set on it
5:44
because we always want it to be 600 pixels tall, and this body should just fill up the remaining space
5:49
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
5:56
You may think, okay, I want my height to take up 100% of the remaining space inside my body
6:00
I'll just set the height to 100%. When you do that, you'll notice something interesting
6:04
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
6:11
pushed to the very bottom. And the reason for that is because our body has a height of 100%
6:16
which means it's 100% of the height of its parent, and the parent has a height of 600 pixels
6:21
What's happening is our body is set to 600 pixels tall, which means that this body is 600
6:26
pixels tall, which is pushing off our footer off the end of our page because our entire card
6:30
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 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
6:47
and we save, you now notice that the actual height 100% doesn't do anything at all. And that's
6:51
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
6:59
height for our body. So this height 100% is just not working at all. Now to get around this, by far the
7:04
easiest way to do it is going to be using Flexbox. So what we can do is we can change our card
7:08
to be at display here of Flex. We can keep the exact same min height and everything like we had before
7:14
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
7:21
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
7:29
can have any part of our page take up all the remaining space. Inside of our body, instead of
7:34
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
7:40
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
7:47
And if our content is very large, so if we just change this to be very large
7:51
you'll now notice, actually I'll just make that a little bit smaller. That's a little bit too much. There we go
7:57
You can now notice that this is just pushing down and becoming larger than 600 pixels tall
8:02
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
8:09
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
8:18
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 in all the time
8:25
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
8:31
I'll link in the cards and description for you. And that's all there is to heights and CSS
8:36
If you enjoyed this video, you're going to love my completely free CSS selector cheat sheet
8:41
It's going to take your CSS skills to the next level by teaching you every single CSS selector you need to know
8:46
It's completely free and it's linked down in the description below. So I'd highly recommend you check that out
8:50
And with that said, thank you very much for watching and have a good day