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

【问题标题】：Force footer to stick at the bottom of rendered pages强制页脚贴在渲染页面的底部
【发布时间】：2017-06-08 11:32:51
【问题描述】：

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

附：对页脚和正文内容使用 position: relative 现在强制页脚留在页面底部，但现在打开页面，页脚位于页面的一半（html 结尾） min-height: 100% on body 元素似乎没有任何效果..

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

Chrome 检查元素：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;
}

【问题讨论】：

如果有内容 below 页脚，我会说你在页脚下方呈现 html。打开 chrome 开发工具并检查
你提供的小提琴看起来不错。仅仅因为填充和高度，它就占用了这么大的尺寸。
将modal移到页脚前
嘿@jamiedanq 我注释掉了Modal，是一样的..
仅将position: absolute; bottom: 0; left: 0; 用于<footer> 标记。

标签： c# html css asp.net-mvc

【解决方案1】：

确保您的 body-content 和 footer 类都将位置设置为相对。在小提琴中，它设置为绝对，因为页脚在包装器内，而底部：0 将其推到该包装器的底部。

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

【讨论】：

@RenderBody()
这是任何 View 的封装，Html 在这个 div 中呈现。
但是你的页脚在那个 div 之外，要么把它放在里面，要么使用 position: relative 。
并且应该保留在外面，这是Layout页面的目的，它包含所有页面的通用html，具体视图呈现在上面的div中..
然后给它一个位置：相对而不是绝对，如果你希望它位于你的内容之下，你真的可以阅读吗？
如果我对页脚和正文内容都使用 position: relative ，当我打开页面时，页脚将位于页面的一半（内容太多），然后添加内容时它会下去。