Question

这应该很简单并且已经回答了100次，但由于某种原因它在我的代码中无效。

我希望我的页脚始终位于页面底部，但是对于内容未填满整页的情况，它仍应位于底部（例如：并非总是固定在底部）：0）

HTML

<div class="home-wrapper">
    <div ui-view="nav@home"></div>
    <div ui-view="content@{{$state.current.name}}" class="content-div"></div>
    <div ui-view="footer@home" class="footer-bar"></div>
</div>

CSS

html
{
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    overflow-x: hidden; 
}

body {
    width: 100%;
    min-height: 100%;
    overflow-x: hidden;
    margin: 0;
    padding: 0;
}

.home-wrapper {
    min-height: 100%;
    position: relative;
}

.footer-bar {
    height: 3em;
    width: 100%;
    overflow:hidden;
    position: absolute;
    bottom: 0;
    left: 0;
}

我想通过在home-wrapper上设置min-height，我们没有任何问题......当内容区域很大时，它可以正常工作，但是在其他方面它被推到了页面顶部！我怀疑这可能与我使用AngularJS和UI-Router进行状态路由这一事实有关，而且我的CSS是按页面加载的。

您可以在http://letsdolunch-web-dev.azurewebsites.net/查看实时示例，点击底部的法律链接，查看问题，http://letsdolunch-web-dev.azurewebsites.net/#/legal

粘性页脚，不使用位置：固定（始终在底部，最小高度）

0 个答案: