nicht angemeldet
So geht das:
Quelle:
http://www.themaninblue.com/experiment/footerStickAlt/good_example_short.htm
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Home</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<meta name="author" content="The Man in Blue" />
<meta name="robots" content="all" />
<meta name="MSSmartTagsPreventParsing" content="true" />
<meta name="description" content="" />
<meta name="keywords" content="" />
<style type="text/css" media="all">
@import "css/main.css";
@import "css/product_features.css";
/* The CSS that's required to position the footer */
html
{
height: 100%;
}
body
{
height: 100%;
}
#nonFooter
{
position: relative;
min-height: 100%;
}
* html #nonFooter
{
height: 100%;
}
#footer
{
position: relative;
margin: -7.5em auto 0 auto;
}
/* A CSS hack that only applies to IE -- specifies a different height for the footer */
* html #footer
{
margin-top: -7.4em;
}
</style>
</head>
<body>
<p class="hidden">
<a href="#content">Skip to content</a>
</p>
<div id="page">
<div id="nonFooter">
<div id="header">
<p id="logo">
<span class="replacement"></span><a href="#"><span class="replacement"></span><span class="linkText">XXXX</span></a>
</p>
<ul id="menu">
<li id="menuSupport" >
<span class="replacement"></span><a href="#" title="Support and documentation"><span class="replacement"></span><span class="linkText">Support</span></a>
</li>
<li id="menuAbout" >
<span class="replacement"></span><a href="#" title="About"><span class="replacement"></span><span class="linkText">About</span></a>
</li>
</ul>
</div>
<!-- END header -->
<div id="content">
<div id="contentMain">
<h1 id="headingFeaturesPages">
<span class="featureIcon"></span>Product X <span class="hidden">–</span> <span class="subTitle">Features: Pages</span>
</h1>
</div>
<!-- END contentMain -->
<div id="contentSub">
<ul id="quickLinks">
<li class="first on">
<a href="#"><span>Feature</span> tour</a>
</li>
<li>
<a href="#"><span>Try</span> a demo</a>
</li>
<li>
<a href="#"><span>Buy</span> online</a>
</li>
</ul>
</div>
<!-- END contentSub -->
<div class="clearer">
</div>
</div>
<!-- END content -->
</div>
<!-- END nonFooter -->
</div>
<!-- END page -->
<div id="footer">
<ul id="bottomLinks">
<li class="first">
<a href="#">Support</a>
</li>
<li>
<a href="#">Employment</a>
</li>
<li>
<a href="#">Contact Us</a>
</li>
</ul>
<p>
© 2005 XXXX. All rights reserved.
</p>
</div>
<!-- END footer -->
</body>
</html>