Check out our Angular Book Series.

How do I Extend a Background Color the Full Height of a Div with CSS?

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:


<body>
</body>

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


body {
height : 100vh;
}

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

Now create our content wrapper div inside the body:


<div class="flex">
</div>

This code uses FlexBox for display:


.flex {
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:


<div class="somebar">
Some Text and other things
</div>

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


.somebar{
width : 150px;
background-color:blue;
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.

Related Blog Entries

Comments (Comment Moderation is enabled. Your comment will not appear until approved.)
All Content Copyright 2005, 2006, 2007, 2008, 2009 Jeffry Houser. May not be reused without permission
BlogCFC was created by Raymond Camden. This blog is running version 5.9.2.002.