Archive for the 'wordpress' Category

Imagine. You are using the K2 theme for WordPress and you want your design to be a full height design. Your first thought is probably that you only need to change some bits and pieces in the CSS and your done, right?!

Ok – it’s almost that easy but in the end it took me quite a while to find the proper solution for pages with very little content on it… So to save you the same hassle – here is a how to. I would suggest you add the CSS code to a custom style stylesheet rather than modifying the style.css to keep things easy when upgrading K2.

Step 1: footer.php
Before we start with the required CSS code we need to make a slight adjustment to the footer.php to ensure that the footer div is included in the page div which acts as the wrapper div.

Move this line:

</div> <!-- Close Page -->

Towards the bottom, right before this line:

<?php wp_footer(); ?>

Step 2: make html and body both 100% in height

html, body {
 height: 100%;
 }

Step 3: adjustments to #page

#page {
 padding-top: 0;
 border-bottom: none;
 height: auto !important;
 height: 100%;
 min-height: 100%;
 }

Step 4: adjustments to #header

#header {
 border-top:  20px solid #fff;
 }

Step 5: adjustments to .content

.content {
 padding: 0 20px 62px;
 }

Step 6: adjustments to #footer

#footer {
 padding: 10px 0 10px;
 position: absolute;
 bottom: 0;
 width: 100%;
 }

Final action

Ok, that’s basically it although you now need to check if some values need to be changed or not. I have changed the padding of the footer (see step 6) to 10px for both the top and the bottom. With these padding values I need a padding value of 62px for the bottom in the content div (see step 5).

Tip: to see how much you need for the bottom padding in step 5 is to add a background color to the footer and then make a screenshot. In, for example, Photoshop you can then easily get the height of the footer. Just a few more pixels to that as a spacing between the content and the footer and you are all set.

Tested with K2 r743 with FF3, IE6, and IE7.