Not able to span for the entire height of the viewport
I have got three divs that have specified heights. I spanned the entire width using width:100%, but the height of 100vh is not working. I want to span for the entire height of the viewport. Here is the codepen for reference - https://codepen.io/adarsh88/pen/xxJZGvq
Adarsh Narayanan
CodePen
Spanning the entire width and height of viewport
I want to span these 3 divs for the entire height and width of the viewport....
13 Replies
your container that has 100vh height set on it covers whole screen your divs have fixed height on them so they won't cover whole screen. Also avoid using vh unit unless you really know them. It's safer to put 100% of height on html and body element. 😉
I put 100% into the body but still, it is not spanning. Could anyone help me with the solution in codepen
Mannix
CodePen
Spanning the entire width and height of viewport
I want to span these 3 divs for the entire height and width of the viewport....
I want the container to span the whole viewport height.
it does, it's the pink background
you have fixed heights on your divs
middle and top-and-bottom
i get it
so how to span them too according to viewport height
what effect you want to achive? do you want the middle to be as big as it can and the top and bottom stay at 25px?
yeah that would be good
so on the middle you want to set height to calc(100% - 50px);
the 50px is 2x25px the height of the top and bottom divs
okay let me try it out
if you want to keep the proportion from the original. it should be 20% height on top and bottom and 60% on the middle if my math is correct
thanks for the help @mannix_
your welcome 🙂