0

content赤いクレヨンをフッターからヘッダーまで引き延ばしたいと思います。コンテンツを入力すればそうなることはわかっていますが、そのまま伸ばすにはどうすればよいでしょうか?

ここでプロジェクトを複製できます

関連コード:

html:

<body>
    <div class="wrapper">
        <div class="header">
            <div class="nav">
                <div class="logo">
                    <strong>
                        <a href="index.html">
                            <img src="images/logo.png" alt="Sam Jarvis logo"/>
                        </a>
                    </strong>
                </div>
                <div class="menu">
                    <ul>
                        <li><a href="#home">HOME</a></li>
                        <li><a href="#about">ABOUT</a></li>
                        <li><a href="#work">PORTFOLIO</a></li>
                        <li><a href="#clients">CONTACT</a></li>
                    </ul>
                </div>
            </div>
        </div>
        <div class="content">

        </div>
    </div>
    <div class="footer">
        <div class="footercontent">
            <p>&copy; 2013 Friend | Design and Development. All Rights Reserved.</p>
        </div>
    </div>
<script>document.write('<script src="http://' + (location.host || 'localhost').split(':')[0] + ':35729/livereload.js?snipver=1"></' + 'script>')</script>
</body>

CSS:

.wrapper {

    min-height: 100%;
    height: auto !important;
    height: 100%;
    margin: 0 auto -6.25em;
}

.header {
    width: 100%;
    height: 100px;
    background-color: #000000;
    margin: 0 auto;
    font-family: 'Open Sans', sans-serif;
    font-weight: 300;
}

.content {
    width: 1000px;
    border: 1px solid #ff0000;
    margin: 0 auto;
    height: 100%;
    min-height: 100%;
}

ここに画像の説明を入力

4

2 に答える 2

0

探しているのは「sticky footer」という名前で、次の URL で例を確認できます: http://ryanfait.com/sticky-footer/

あなたのhtmlには特定の構造が必要です...

<body>
    <div class="wrapper">
        [YOUR CONTENT INCLUDING HEADER]
        <div class="push"></div>[this div is required]
    </div>
    <div class="footer">
        [YOUR FOOTER]
    </div>
</body>

注意: .push と .footer が height:100px の場合。.wrapper には margin: 0 auto -100px が必要です。

どのスタイルも重要なので、適用するすべてのスタイルに注意してください。

于 2013-07-05T00:36:20.247 に答える