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:

view plain print about
1<body>
2</body>

We want the body to be the height of the view area:

view plain print about
1body {
2 height : 100vh;
3}

This sets the body to 100% height of the view area.

Now create our content wrapper div inside the body:

view plain print about
1<div class="flex">
2 </div>

This code uses FlexBox for display:

view plain print about
1.flex {
2 display : flex;
3 height : auto;
4 min-height : 100%;
5}

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:

view plain print about
1<div class="somebar">
2 Some Text and other things
3 </div>

This is styled with a specific width, but no specific height. I also specified the color

view plain print about
1.somebar{
2 width : 150px;
3 background-color:blue;
4 color : white;
5}

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.