Question

我想伸展我的红色content cless从页脚延伸到标题。我知道如果我用它填充它的内容，但我该如何让它延伸呢？

您可以克隆项目here

相关代码：

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%;
}

enter image description here

Answer 1

两件事：

添加规则html,body {height:100%}
从height: auto !important;

#wrapper

<强> jsFiddle example

Answer 2

您正在寻找的是“粘性页脚”，您可以查看此网址中的示例： 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的高度为：100px;然后.wrapper必须有保证金：0 auto -100px。

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

如何用html / css从页眉到页脚拉伸容器div？

2 个答案: