嘿，我试图在添加内容时强制页脚移动到页面底部。 类似于:http://jsfiddle.net/eTwJh/2/ .我将 asp.net mvc 与布局页面一起使用，其中 View 通过 @RenderBody() 呈现为布局页面“主体”。
附言使用 position: relative for footer 和 body-content 现在强制页脚停留在页面底部，但现在打开页面时，页脚位于页面的一半(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>© @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;
}
最佳答案
确保您的 body-content 和 footer 类的位置都设置为 relative。在 fiddle 中，它被设置为 absolute 因为页脚在包装器内部，而 bottom: 0 将它推到包装器的底部。
或者简单地为这两个 div 创建一个包装器，就像在提供的 fiddle 中一样。
关于c# - 强制页脚停留在渲染页面的底部，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/44434554/