• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 219
  • Last Modified:

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

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!
0
Researcher37
Asked:
Researcher37
  • 2
1 Solution
 
Researcher37Author Commented:
I think I solved my own problem- but would welcome suggestions... or feedback; visit urls above. Thanks!
0
 
David S.Commented:
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?
0
 
Prafulla MaharjanCommented:
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..
0
 
Researcher37Author Commented:
Kravimir:: no, not with this update, unfortunately.
0

Featured Post

Free Tool: IP Lookup

Get more info about an IP address or domain name, such as organization, abuse contacts and geolocation.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now