Free Online Courses for Software Developers - MrBool
× Please, log in to give us a feedback. Click here to login
×

You must be logged to download. Click here to login

×

MrBool is totally free and you can help us to help the Developers Community around the world

Yes, I'd like to help the MrBool and the Developers Community before download

No, I'd like to download without make the donation

×

MrBool is totally free and you can help us to help the Developers Community around the world

Yes, I'd like to help the MrBool and the Developers Community before download

No, I'd like to download without make the donation

How to freeze footer using HTML and CSS

The article here describes on the process to freeze footer making use of HTML, CSS for a HTML page.

Positioning a footer to stay at the bottom of the browser window unless the content is larger, sounds like it should be fairly simple, but is in fact quite an advanced technique when it comes to CSS. Excel freeze is a user friendly feature.

Background

When we have a summary row in the bottom of a table, we want to compare it with other rows. When you scroll the table, it had better stay at the bottom of the table. You need add and tags between your summary row and then write a CSS for to present freeze footer.

Using the code

Add div tag outside the target table.

Add <tfoot> and tags outside those freeze footer rows.

Add CSS style.

Listing1: The CSS code for freeze footer:

/* To provide freezed footer */
tfoot tr {
 top: expression(parentNode.parentNode.parentNode.TopOfFooter); /* IE5+ only */
 position: relative;
 z-index: 20;
}
<PUBLIC:COMPONENT>
<PUBLIC:property NAME="TopOfFooter" value="20" GET="getTopOfFooter" />
function getTopOfFooter()
 '   parentNode.parentNode.parentNode.scrollTop
 ' + parentNode.parentNode.parentNode.offsetHeight
 ' - parentNode.parentNode.parentNode.scrollHeight
 ' - Height of scroll bar
 dim HeightBar
 ' check whether horizontal scroll bar exists
 if element.scrollWidth > element.offsetWidth then
  HeightBar = heightOfScrollBar
 else
  HeightBar = 0
 end if
 
 ' check, if height of table (plus height of horizontal
 ' scroll bar) is smaller than outside object,
 ' change top of footer row, or do NOT change it (keep it as 0)
 if element.offsetHeight + HeightBar <= element.scrollHeight then
  getTopOfFooter = element.scrollTop + element.offsetHeight_
                          - element.scrollHeight - HeightBar
 else
  getTopOfFooter = 0
 end if
end function
</script>
</PUBLIC:COMPONENT>

Create Some Page Content

We need to get some basic content on our page before getting started with the freeze footer. In order for us to get the full effect of the freeze footer, we need enough content on the page to create browser scrolling. Let's give this page a header!

Our Page Needs A Header

Let's get the markup started for our header.

First we're going to add a div (header-wrap) to our index.html file, just above our container div tag. Go ahead and open up your index.html file in your text-editor of choice, and include the header-wrap div tags just above the container div tag. Now open up your main.css file and include the header-wrap styles right inbetween the blockquote and #container styles.

Listing2: Body with CSS

Body {
	font: 62.5% Arial, Helvetica, sans-serif;
	color: #597347;
	margin: 0;
	padding: 0;
	background: #beffbf;
}

h1, h2 {
	color: #87ac6d;
	font-family: Tahoma, Arial, Geneva, sans-serif;
	margin: 20px 0 10px;
}

h1 {
	font-size: 2.5em;
}

p {
	margin: 10px 0;
	padding: 0;
}

blockquote {
	font-style: italic;
}

#header-wrap {
	position: freezed;
	top: 0;
	left: 0;
	width: 100%;
	height: 90px;
	background: url(../images/header-bg.png) repeat-x left bottom;
}

#container {
	width: 940px;
	margin: 0 auto;
	font-size: 1.4em;
	overflow: auto;
	padding-top: 90px;
}

#content {
	float: left;
	width: 625px;
}

#sidebar {
	float: right;
	width: 275px;
	margin-top: 10px;
}

What we've done is created a div container that is separate from the rest of our content. If you look at the original content markup we started with, the

has styles including a width of 940px and margin declarations of auto on the right and left properties. As we all know, this will cause block elements to center horizontally. If we put our header-wrap div inside of the container div, our header-wrap's width would only be 100% of its containing element (
) which is only 940px, not 100% of the browser window's width.

If you take a look at what we have now; you'll notice one little problem - our content is hiding behind our header. In order to fix this, we simply need to add some padding to our container div.

#container {
	width: 940px;
	margin: 0 auto;
	font-size: 1.4em;
	overflow: auto;
	padding-top: 90px;
}

By adding a top padding of 90px (the same as our header-wrap height) we've pushed our page content below our header. You should now see some breathing room between our page content and the freezed header.

It's that simple to implement a freezed header in modern browsers. We obviously don't have any content in our header right now, but that's all that's required to apply a freezed header to a layout. We want our header content to be centered with the rest of page content, hence we added another div and some basic styles to give our header some basic content. While it's not important or directly related to implementing a freezed header, the below lists the CSS used:

Add the following styles below the #header-wrap styles.

Listing3: CSS used for the demo

#header {
	width: 940px;
	margin: 0 auto;
	position: relative;
}

#header h1 {
	color: #beffbf;
	text-align: right;
	width: 290px;
	margin: 0;
	position: absolute;
	left: 0;
	top: 20px;
}

#header h1 em{
	color: #90b874;
	font-size: small;
	display: block;
}

#header ul {
	margin: 0;
	padding: 0;
	list-style: none;
	position: absolute;
	top: 35px;
	right: 0;
}

#header ul li {
	float: left;
	margin-right: 5px;
}

#header ul li a{
	color: #90b874;
	font-weight: bold;
	font-size: 1.4em;
	margin-right: 5px;
	text-decoration: none;
}

#header ul li a:hover {
	color: #beffbf;
}

You should now have a fully functioning freezed header. This will render correctly in all your major browsers including IE7/IE8, Firefox, Opera, Safari, and Google Chrome. In IE6, however, the header-wrap's position value of freezed is ignored and treated as position: static. This causes the header to just scroll with the rest of the content. Not only that, but the container div's padding is not ignored, therefore it's just sitting 90px below the header-wrap.

Result of article

Figure 1: Result of article

Conclusion

We learnt the technique to freeze footer making use of CSS, HTML for a page built in HTML. Hope you liked the article.



Software developer with more than 5 years of development on Java, HTML, CSS.

What did you think of this post?
Services
[Close]
To have full access to this post (or download the associated files) you must have MrBool Credits.

  See the prices for this post in Mr.Bool Credits System below:

Individually – in this case the price for this post is US$ 0,00 (Buy it now)
in this case you will buy only this video by paying the full price with no discount.

Package of 10 credits - in this case the price for this post is US$ 0,00
This subscription is ideal if you want to download few videos. In this plan you will receive a discount of 50% in each video. Subscribe for this package!

Package of 50 credits – in this case the price for this post is US$ 0,00
This subscription is ideal if you want to download several videos. In this plan you will receive a discount of 83% in each video. Subscribe for this package!


> More info about MrBool Credits
[Close]
You must be logged to download.

Click here to login