Question

我正在构建一个相当复杂的布局，它依赖于受高度和最小高度的影响，因此将页脚放置在底部的常用技巧都无法正常工作。 / p>

鉴于我的JSFiddle，当内容很多或很少时，如何将页脚放在底部？

以下是我目前正在使用的一些CSS：

body, html, #wrapper {
    height: 100%;
    min-height: 100%;
}
.header {
    height: 30%;
    background-color: aliceblue;
}
.main { 
    background-color: antiquewhite;
}
.main .content {
    height: 2000px; 
    background-color: aquamarine;    
    padding-bottom:80px; 
}
.footer {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 80px;
    background-color: beige;
}

Answer 1

如果我理解您的要求，您希望页脚位于内容框的底部。

一种解决方案是制作内容框position:relative并在其中移动页脚，以便其position:absolute将其绑定到内容框，bottom:0将达到所需的效果让它坐在所述内容盒底部的效果。

请参阅http://jsfiddle.net/wn6uvske/5/。

HTML：

<div id="wrapper">
    <div id="sidebar"></div>
    <div id="body-content">
        <div class="header">
            <div class="navbar navbar-default" role="navigation">
                <div class="container">
                    <ul class="nav navbar-nav navbar-right">
                        <li><a href="#" class="menu-toggle">Toggle Menu</a>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
        <div class="main">
            <div class="content container">
                <p>Content</p>
                <div class="footer"> <!-- moved up into content container -->
                    <p>Footer</p>
                </div>
            </div>
        </div>
    </div>
</div>

（相关）CSS：

.main .content {
    height: 2000px; 
    background-color: aquamarine;    
    padding-bottom:80px; 
    position:relative;
}
.footer {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 80px;
    background-color: beige;
}

Answer 2

你可以使用粘性页脚技巧。将所有内容包装在不包含页脚的包装器中，在所述包装器上设置min-height:100%和margin: -(footer height)以使其保持在底部：

FIDDLE

<强>更新

您可以将header部分取出并使用CSS calc()来调整高度：

NEW FIDDLE

位置页脚位于页面底部

2 个答案: