stretch a div to the bottom of the screen

I have a div that i want to fill the screen. how do i do this?
No description
No description
No description
17 Replies
clevermissfox
clevermissfox11mo ago
min-height: 100vh
13eck
13eck11mo ago
You actually want the parent to have that min height and be a flex container. Then you add flex-grow: 99 to the specific element so it takes up all the free space.
Gray
Gray11mo ago
What if I have a header that takes up 50 px.
patrick
patrick11mo ago
you could do calc(100vh - 50px)
Gray
Gray11mo ago
Alright Thanks
13eck
13eck11mo ago
If the header ever changes you’ll have to change the calc function, too. Using flexbox you don’t have to worry about any of that: the browser figures it out and takes care of it
patrick
patrick11mo ago
you're right. but what would cause the header height to change. just curious
Gray
Gray11mo ago
Interesting. I'll have to do the conquering responsive layouts If I ever wanted to change it idk
13eck
13eck11mo ago
User changing font size. Small viewport. Zooming. Just off the top of my head
patrick
patrick11mo ago
this won't actually affect it, but Gray made a point. that if you wanted to change the height manually in your code, you'd have to change it at multiple places. thanks for showing me this with the flexbox
clevermissfox
clevermissfox11mo ago
That’s up to preference . Why put min height on the body or wrap it in an extra div just to make it a flexbox?
13eck
13eck11mo ago
Do you can use the flex-grow property. Flex is based on the parent. If the parent isn’t full-height there won’t be any free space to use If the header has any text or uses rem/em it very well could. In web design you should almost never have fixed heights due to accessibility concerns. And magic numbers (the 50px in this case) is also not a good idea
clevermissfox
clevermissfox11mo ago
But if this content doesn’t have a parent you wouldn’t put flex on the body unless you know the kind of results that’s gonna give you.
13eck
13eck11mo ago
Why not? It’s flexbox. You should know what result it’ll give. Flex on body is pretty routine
clevermissfox
clevermissfox11mo ago
For someone who is brand new to css , they may not. My point is there is more than one answer to most things in css. And the answer is not always flex. Don’t get me wrong I use flex and grid every day, but if someone is new like OP appears to be flex has some behaviours that may confuse them further if they aren’t familiar.
13eck
13eck11mo ago
If you don’t know then you learn, yeah? Flex and grid are pretty ubiquitous and worth learning.
Jochem
Jochem11mo ago
and especially flex is pretty quick to get the basics down
Want results from more Discord servers?
Add your server