0

固定フッターを使用して 3 行のレイアウトを作成できる人はいますか? コンテンツはフッターまで埋める必要がありますが、コンテンツがページよりも大きい場合、フッターは押し下げられます

誰かがこれを作成できますか、またはこれを行う方法を示すチュートリアルを知っている人はいますか

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

これは、広く使用されているスティッキー フッターです。私が作成したフィドルでテストしてください。

テストのためにコンテナー div に<h1>Hello</h1>etc を入力するだけで、コンテンツの量に関係なく、フッターが一番下に固定されていることがわかります。

于 2013-09-18T03:01:45.217 に答える