0

我想伸展我的红色contentcless 从页脚延伸到页眉。我知道如果我用内容填充它会，但我如何让它按原样伸展？

您可以在此处克隆项目

相关代码：

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

2

两件事情：

  1. 添加规则html,body {height:100%}
  2. height: auto !important;从_#wrapper

jsFiddle 示例

于 2013-07-05T00:24:57.473 回答
0

您正在寻找的名称为“sticky footer”，您可以在此网址中查看示例： 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 必须有边距：0 auto -100px。

注意应用的每一种风格，因为每一种都很重要。

于 2013-07-05T00:36:20.247 回答