sonic2kk · February 17, 2015 18:44 · imufun · Feb 17, 2015
diff --git a/index.html b/index.html
 <!DOCTYPE html>

 <html>
    <head>
        <title>Sticky Footer Test</title>

        <!--[if lt IE 7]>
            <style type="text/css">
                #wrapper { height:100%; }
            </style>
        <![endif]-->

        <!-- CSS is inline for the purposes of this example -->
        <style>
            html,
            body {
                margin:0;
                padding:0;
                height:100%;
            }
            #wrapper {
                min-height:100%;
                position:relative;
            }
            #header {
                background:#ededed;
                padding:10px;
                font-family:tahoma;
            }
            #content {
                padding-bottom:100px;
                padding-left: 10px;
            }
            #footer {
                background:#ffab62;
                width:100%;
                height:100px;
                position:absolute;
                bottom:0;
                left:0;
                padding-left: 10px;
                font-family: tahoma;
                font-weight: bold;
            }
        </style> 
    </head>

    <body>
        <!-- Footer -->
        <div id="wrapper">
            <div id="header">
                <h2>Hello!</h2>
            </div>

            <div id="content">
                <p>This is some sample content, because Lorem Ipsum is too mainstream.</p>
                <p>The footer will stick to the bottom of the page. Copy this Gist and add your own content.</p>
                <p>I believe you'll find that it sticks to the bottom of the page.</p>
                <p>Hopefully this helps you. I spent a long time trying to find a simple example like this one.</p>
                <p>Share it with your friends, and thanks for viewing!!</p>
            </div>

            <div id="footer">
                <p>Footer text</p>
            </div>
        </div>
    </body>
 </html>
	<!DOCTYPE html>

	<html>
	<head>
	<title>Sticky Footer Test</title>

	<!--[if lt IE 7]>
	<style type="text/css">
	#wrapper { height:100%; }
	</style>
	<![endif]-->

	<!-- CSS is inline for the purposes of this example -->
	<style>
	html,
	body {
	margin:0;
	padding:0;
	height:100%;
	}
	#wrapper {
	min-height:100%;
	position:relative;
	}
	#header {
	background:#ededed;
	padding:10px;
	font-family:tahoma;
	}
	#content {
	padding-bottom:100px;
	padding-left: 10px;
	}
	#footer {
	background:#ffab62;
	width:100%;
	height:100px;
	position:absolute;
	bottom:0;
	left:0;
	padding-left: 10px;
	font-family: tahoma;
	font-weight: bold;
	}
	</style>
	</head>

	<body>
	<!-- Footer -->
	<div id="wrapper">
	<div id="header">
	<h2>Hello!</h2>
	</div>

	<div id="content">
	<p>This is some sample content, because Lorem Ipsum is too mainstream.</p>
	<p>The footer will stick to the bottom of the page. Copy this Gist and add your own content.</p>
	<p>I believe you'll find that it sticks to the bottom of the page.</p>
	<p>Hopefully this helps you. I spent a long time trying to find a simple example like this one.</p>
	<p>Share it with your friends, and thanks for viewing!!</p>
	</div>

	<div id="footer">
	<p>Footer text</p>
	</div>
	</div>
	</body>
	</html>