任何人都可以创建带有粘性页脚的三行布局。内容必须填充到页脚,但如果内容大于页面,则页脚会被向下推
有人可以创建这个吗,或者有人知道向您展示如何执行此操作的教程
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">
html, body
{
min-height:100%; height:100%; margin:0px; width:100%
}
body > #wrapper
{
margin-bottom:-240px; height:100%
}
header
{
display:block; background-color:#ffd800; height:130px;
}
body > #wrapper > section
{
display:block; background-color:#ff6a00; height:100%; margin-bottom:-240px
}
footer
{
display:block; background-color:#ffd800; height:240px
}
</style>
<title></title>
</head>
<body>
<div id="wrapper">
<section>
<header>
Header
</header>
<div id="body">
<nav>
Left Sidebar
</nav>
<article>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
</article>
<aside>
<p>Right Side Bar</p>
</aside>
</div>
</section>
</div>
<footer>
Footer
</footer>
</body>
</html>