Improve company productivity with a Business Account.Sign Up

Solved

100% height on all pages is it possible with this design?

Posted on 2011-03-04

1 solution

Medium Priority

223 Views

Last Modified: 2012-05-11

I have a design that I have to modify... I can only modify the code a little (2 include files).

We're going from a flexible layout to a fixed 960 width. No problem there. I also have to change the header and footer. No problem with most of this... except:
I have to have the footer stuck to the bottom of the view screen, no matter the content height. This is not what we do now.

here is the site in test mode:
http://ulsandbox.org/research/media/index.html

We use the YAML CSS framework.

The most relevant style sheet is probably this one:
http://ulsandbox.org/mainul/11/css/yaml_33/yaml/screen/basemod_grids.css

To see my issue view this short page:
http://ulsandbox.org/research/journals/index.html
or this long page:
http://ulsandbox.org/research/media/index.html

I can get the footer to stick on the short pages, but on the long pages, it is in the middle of the content area, not stuck to the bottom.

I validated the page as well as the CSS... I am missing something!

Comment

Question by:Researcher37

4 Comments

LVL 3

Author Comment

by:Researcher37

ID: 350402022011-03-04

I think I solved my own problem- but would welcome suggestions... or feedback; visit urls above. Thanks!

LVL 43

Accepted Solution

by:David S.

David S. earned 2000 total points

ID: 350420082011-03-04

There are several variants to the technique for doing that. (It's often called "CSS Sticky Footer".) You've gotten close by giving "min-height:85%" to "#header", but 85% won't work as well as one would like for all viewport sizes.

Here's how I'd do it:

#header {
	background: #fff;
	margin: -142px auto 0; /* negative top margin makes room for the footer */
	min-height: 100%;
	width: 960px;
}

#pagewrap {
	padding-top: 142px; /* to move the content back down so the top isn't cut off */
	width: 100%; /* for IE7 */
}

Open in new window

The 142px is the total height of the footer, which in this case is "height:137px" plus "margin-bottom:5px".

P.S. Can you really not make it so the "#header" element is inside the "#pagewrap" element instead of the other way around?

LVL 3

Expert Comment

by:Prafulla Maharjan

ID: 351445782011-03-15

It is good that not to give any height in the page
just you can give the width.
height will take automatically according to the content you give.

thanks..

LVL 3

Author Comment

by:Researcher37

ID: 351477902011-03-16

Kravimir:: no, not with this update, unfortunately.

Featured Post

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment Already a member? Login.

A few CSS rules to keep in mind

Article by: p_king

When writing CSS, there are a few simple rules that will make your life easier. 1. Using ‘* {box-sizing:border-box;}’. Using this will wrap all your elements in a nice little compact box-model that will give you the width you want, like so... …

How to organize your SASS code

Article by: Alexandre

SASS allows you to treat your CSS code in a more OOP way. Let's have a look on how you can structure your code in order for it to be easily maintained and reused.

Rounded Corner Effect in CSS

Video by: Sarah

In this tutorial viewers will learn how to style rounded corners for elements in CSS using the border-radius property Begin with a normal styled element such as a div: To style all four corners of the div to be the same degree of roundness, use the …

Introduction to CSS (Part 1)

Video by: Jason

The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…