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?
17 Replies
min-height: 100vhYou 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.What if I have a header that takes up 50 px.
you could do
calc(100vh - 50px)Alright
Thanks
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
you're right. but what would cause the header height to change. just curious
Interesting. I'll have to do the conquering responsive layouts
If I ever wanted to change it idk
User changing font size. Small viewport. Zooming. Just off the top of my head
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
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?
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 ideaBut 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.
Why not? It’s flexbox. You should know what result it’ll give. Flex on body is pretty routine
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.
If you don’t know then you learn, yeah? Flex and grid are pretty ubiquitous and worth learning.
and especially flex is pretty quick to get the basics down