个人中心
文章发布
退出
作者热门文章
- android - 多次调用 OnPrimaryClipChangedListener
- android - 无法更新 RecyclerView 中的 TextView 字段
- android.database.CursorIndexOutOfBoundsException : Index 0 requested, 光标大小为 0
- android - 使用 AppCompat 时，我们是否需要明确指定其 UI 组件(Spinner、EditText)颜色
25
4
页脚不会停留在页面底部。我在我的 application.html.erb 文件中渲染了一个部分。我想知道这是否是因为我在我的应用程序 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>
最佳答案
其他人所说的使用固定位置会奏效。如果您不想从流程中取出任何东西，另一种选择是使用 flex。只需将不是页脚的所有内容都包装在一个容器中。然后给 body class 类似的东西
body{
width: 100%;
min-height: 100vh;
display: flex;
flex-direction: column;
}
.container{
flex-grow: 1;
}
footer{
flex-grow: 0;
}
所以主体至少是视口(viewport)的高度。页脚需要多高，容器，无论里面有多少东西，至少会填满剩余的空间，迫使页脚向下。这是一个Codepen Example如果有帮助的话。
关于html - 页脚不会停留在页面底部，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/54407845/
25
4
0
我是一名优秀的程序员,十分优秀！