Last week I used CSS to tile a graphic across the whole width of a page. The purpose was to extend a header bar's color when the page scrolled right beyond the iniital viewport.
Now, with the same project I wanted to extend the left nav to the full height of the page. I couldn't use the same trick as you can't tile two separate background images.
This is still doable with some CSS. First, start the HTML Body:
We want the body to be the height of the view area:
height : 100vh;
This sets the body to 100% height of the view area.
Now create our content wrapper div inside the body:
This code uses FlexBox for display:
display : flex;
height : auto;
min-height : 100%;
It also contains a trick. The height is set to auto and the min-height is set to 100%. That, combined with the body's height of 100vh will extend this div through the full height of the page.
Finally, create our left nav bar inside our Flex div:
Some Text and other things
This is styled with a specific width, but no specific height. I also specified the color
width : 150px;
color : white;
Check out the code here.
I've been doing a lot of HTML CSS work for a client, but I'm working on some longer programming based articles which will be coming out soon.