<html>
<head>
<style type="text/css">
html {
height: 100%;
margin: 0;
padding: 0;
}
body {
margin: 0;
padding: 0;
}
#page
{
min-height: 100%;
width: 100%;
position: absolute;
background-color: #AAA;
}
#header
{
padding: 1em;
background-color: #F00;
}
#content
{
margin-bottom: 5em;
padding: 1em;
background-color: #0F0;
}
#footer
{
width: 100%;
position: absolute;
bottom: 0;
background-color: #00F;
}
#footer > *
{
padding: 1em;
}
</style>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.pack.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("button").click(function() { $("#hidden").slideToggle(1000); })
});
</script>
</head>
<body>
<div id="page">
<div id="header">
<p>This is the header!</p>
</div>
<div id="content">
<p>Yeah, some content!</p>
<p>Yeah, some content!</p>
<p>Yeah, some content!</p>
<button>Push the footer!</button>
<div id="hidden" style="display: none">
<p>Begin of extra content</p>
<p>Much hidden content!</p>
<p>Much hidden content!</p>
<p>Much hidden content!</p>
<p>Much hidden content!</p>
<p>Much hidden content!</p>
<p>Much hidden content!</p>
<p>Much hidden content!</p>
<p>End of extra content</p>
</div>
</div>
<div id="footer">
<p>This is the footer!</p>
</div>
</div>
</body>
</html>
【slide】
