Solved

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

Posted on 2011-03-04
4
212 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!
0
Comment
Question by:Researcher37
  • 2
4 Comments
 
LVL 3

Author Comment

by:Researcher37
ID: 35040202
I think I solved my own problem- but would welcome suggestions... or feedback; visit urls above. Thanks!
0
 
LVL 42

Accepted Solution

by:
David S. earned 500 total points
ID: 35042008
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
 
LVL 3

Expert Comment

by:prafullamjn
ID: 35144578
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
 
LVL 3

Author Comment

by:Researcher37
ID: 35147790
Kravimir:: no, not with this update, unfortunately.
0

Featured Post

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Introduction A frequently asked question goes something like this:  "I am running a long process in the background and I want to alert my client when the process finishes.  How can I send a message to the browser?"  Unfortunately, the short answer …
Styling your websites can become very complex. Here I'll show how SASS can help you better organize, maintain and reuse your CSS code.
In this tutorial viewers will learn how to style elements, such a divs, with a "drop shadow" effect using the CSS box-shadow property Start with a normal styled element, such as a div.: In the element's style, type the box shadow property: "box-shad…
In this tutorial viewers will learn how to embed custom externally-hosted Google Fonts using the Google Font API in CSS Go to the Google Fonts website at google.com/fonts: Browse or search based on font properties or name to find a suitable font for…

896 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

15 Experts available now in Live!

Get 1:1 Help Now