0

我想让 class="content" 延伸到页脚。对于我的生活，我无法弄清楚。我已经尝试了许多已经发布的建议，但没有结果。

这是我到目前为止得到的：

http://jsfiddle.net/eBR8e/

我需要红色填充到页脚。有什么建议么？

HTML

<body>
    <div class="top-wrapper">
        <div class="header">
            Header
        </div>
        <div class="navigation">
            <div class="logo"></div>
            <div class="menu">
                Menu               
            </div>
        </div>

        <div class="content">
       Test<br> Test<br> Test<br>
        </div>
    </div>

    <div class="bottom-wrapper">
        <div class="footer">   
            footer.
        </div>
    </div>    
</body>

CSS

html
{
    height: 100%;
}

body
{
    height: 100%;
    width: 100%;
    margin: 0;
}

.top-wrapper
{
    min-height: 100%;
}

.header
{
    background-color:grey;
    border-style: solid;
    border-width: 0 0 2px 0;
    border-color: #E5E529;
    box-shadow: 0 0 6px #848484;
    padding: 10px;
}

.navigation
{
    width: 960px;
    margin-left: auto;
    margin-right: auto;
    position: relative;
}

.content
{
    background-color: red;
    width: 960px;
    margin-left: auto;
    margin-right: auto;
    overflow:auto;
    padding-bottom: 152px;
    border-style: solid;
    border-width: 2px;
    border-color: #E5E529;
}

.bottom-wrapper
{
    background-color: blue;
    border-style: solid;
    border-width: 2px 0 0 0;
    border-color: #E5E529;
    box-shadow: 6px 6px 6px 6px #848484;
    position: relative;
    margin-top: -152px;
    height: 150px;
    clear:both;
}

.footer
{
    padding: 10px 10px 10px 10px;
}

/* Menu CSS */
.logo
{
    width: 250px;
    height: 100px;
}

.menu
{
    width: 710px;
    margin-left: 250px;
    position: absolute;
    top: 41px;
    background-color: green;
}
4

1 回答 1

0

通过这个“粘性页脚”示例，您仅拉伸了“顶部包装”。我认为为了调整“内容”元素的（最小）高度，它必须通过 JS 计算。

这是一个使用 jQuery 的示例：http: //jsfiddle.net/eBR8e/1/

(function( window, $, undefined ) {

    var topWrapperHeight = $('.top-wrapper').height(),
        bottomWrapperHeight = $('.bottom-wrapper').height(),
        headerHeight = $('.header').outerHeight(),
        navigationHeight = $('.navigation').outerHeight(),
        contentHeight;

    contentHeight = topWrapperHeight - bottomWrapperHeight - ( headerHeight + navigationHeight );

    $('.content').css({
        'min-height' : contentHeight
    });
})( window, jQuery );

这是一个非常直接的计算，但如果您有任何问题，请告诉我。

于 2013-06-30T01:33:06.537 回答