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.
