0

任何人都可以创建带有粘性页脚的三行布局。内容必须填充到页脚，但如果内容大于页面，则页脚会被向下推

有人可以创建这个吗，或者有人知道向您展示如何执行此操作的教程

    <!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>
4

2 回答 2

0

这是广泛使用的粘性页脚。在我创建的小提琴中测试它。

只需使用<h1>Hello</h1>etc 填充容器 div 进行测试，无论内容有多少，都可以看到页脚粘在底部。

于 2013-09-18T03:01:45.217 回答
0

伙计......必须有一个 SO to Fiddle 方式而不是看到这个......无论如何，这是你主要需要让这个工作：

html,body{height:100%;}
.wrapper{height:100% overflow: hidden;}

我更改了一些代码（主要是因为我讨厌 ids 并且需要简化......）

给我这个

于 2013-09-18T02:53:45.667 回答