Question

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

有人可以创建这个，或者有人知道一个教程，告诉你如何做到这一点

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

Answer 1

男人......必须要有一个小小的方式，而不是看到这个...反正这是你主要需要的工作：

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

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

FIDDLE ME THIS

Answer 2

这是广泛使用的粘性页脚。在我创建的fiddle中测试一下。

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

三行布局内容100％高度与粘性页脚

2 个答案: