页脚不会停留在页面底部
[英]Footer will not stay at the bottom of the page
问题描述
The footer will not stay at the bottom of the page. 
页脚不会停留在页面底部。 I render a partial inside my application.html.erb file. 我在application.html.erb文件中渲染了一部分。 I am wondering if it is because im rendering the footer partial outside the div container i have inside my application erb file. 我想知道是否是因为我在我的应用程序erb文件中有div容器外部渲染了页脚部分。
<html>
<head>
</head>
<body>
<%= render 'shared/navbar' %>
<%= render 'shared/message' %>
<!-- NOTIFICATIONS -->
<% if current_user %>
<input type="hidden" id="user_id" value="<%= current_user.id %>">
<% end %>
<div class="container">
<%= yield %>
</div>
<%= render 'shared/footer' %>
</body>
</html>
<footer class="section footer-classic context-dark bg-image" style="background: #2d3246;">
<div class="container">
<div class="row row-30">
<div class="col-md-4 col-xl-5">
<div class="pr-xl-4"><a class="brand" href="index.html"><img class="brand-logo-light" src="images/agency/logo-inverse-140x37.png" alt="" width="140" height="37" srcset="images/agency/logo-retina-inverse-280x74.png 2x"></a>
<p>We are an award-winning creative agency, dedicated to the best result in web design, promotion, business consulting, and marketing.</p>
<!-- Rights-->
<p class="rights"><span>© </span><span class="copyright-year">2019</span><span> </span><span style="color: red;">B</span><span>. </span><span>All Rights Reserved.</span></p>
</div>
</div>
<div class="col-md-4">
<h5>Contacts</h5>
<dl class="contact-list">
<dt>email:</dt>
<dd><a href="info@budlyfe.com">info@b.com</a></dd>
</dl>
</div>
<div class="col-md-4 col-xl-3">
<h5>Links</h5>
<ul class="nav-list">
<li><a><%= link_to 'About', about_path %></a></li>
<li><a><%= link_to 'FAQ', faq_path %></a></li>
<li><a><%= link_to 'Contact', contact_path %></a></li>
</ul>
</div>
</div>
</div>
</footer>
3 个解决方案
解决方案1
2 2019-01-28 21:00:53
What others have said using fixed positions will work. 其他人说的使用固定位置的内容将起作用。 Another alternative if you don't want to take anything out of the flow is to use flex. 如果您不想从流程中取出任何东西，则另一种选择是使用flex。 Just wrap everything that isn't footer in a container. 只需将所有不包含页脚的内容包装在容器中。 Then give the body class something like 然后给身体课像
body{
width: 100%;
min-height: 100vh;
display: flex;
flex-direction: column;
}
.container{
flex-grow: 1;
}
footer{
flex-grow: 0;
}
So the body is at least the height of the viewport. 因此，主体至少是视口的高度。 The footer is however tall it needs to be and the container, regardless of how much stuff is in it, will at least fill in the rest of that space forcing the footer down. 无论页脚多么高，它都必须是高的，并且无论容器中有多少东西，容器都将至少填充其余的空间，从而迫使页脚向下。 Here is a Codepen Example if that helps. 这是一个Codepen示例，如果有帮助的话。
解决方案2
1 2019-01-28 19:54:45
you need to define a static height for footer and a fixed position with 0 bottom , something like this : 您需要为页脚定义静态高度，并为底部定义0的固定位置，如下所示：
footer {
position: fixed;
height: XXX;
bottom: 0;
width: 100%;
}
解决方案3
0 2019-01-28 18:09:21
Have you tried adding in CSS? 您是否尝试过添加CSS？
Try something like this. 尝试这样的事情。
.footer-classic {
position: fixed;
left:0;
bottom:0;
height: defineYourHeight;
width:100%;
}
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.