Question

嘿我尝试在添加内容时强制页脚移动到页面底部。类似于：http://jsfiddle.net/eTwJh/2/ 。我正在使用带有布局页面的asp.net mvc，其中视图使用@RenderBody（）呈现为布局页面'body'。

P.S。使用位置：相对于页脚和正文内容现在强制页脚停留在页面底部，但现在打开页面页脚，页脚位于页面的一半（html结尾）min-height：100％on身体元素似乎没有任何影响..

屏幕截图：Footer not staying at the bottom of the page

Chrome Inspect元素：http：// imgur.com/BWuFxn2

这是我的代码Layout.cshtml页面：

 <body>
 ....
 <div class="container body-content" style="position:relative">
    @RenderBody()
</div>
<footer>
    <p>&copy; @DateTime.Now.Year Some Text</p>
</footer>

@if (!User.Identity.IsAuthenticated)
{
<!-- BEGIN # MODAL LOGIN -->
<div class="modal fade" id="login-modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" style="display: none;">
    <div class="modal-dialog">
        <div class="modal-content" id="modal-content">
        </div>
    </div>
</div>
<!-- END # MODAL LOGIN -->
}
</body>
</html>

这是我的CSS：

footer {
  clear: both;
  background-color: #000;
  width: 100%;
  padding: 20px 0;
  border-bottom: 1px solid #5c5c5c;
  position: absolute;
  bottom: 0px;
}

footer p {
    padding-left: 5px;
    color: #fff;
    display: table-cell;
}

Answer 1

确保您的正文内容和页脚类的位置设置为相对位置。在小提琴中它被设置为绝对，因为页脚在内部包装器和底部：0将其推到该包装器的底部。

或者只是为这两个div创建一个包装器，就像提供的小提琴一样。

强制页脚粘贴在渲染页面的底部

1 个答案: