css - Rails 应用程序中的粘性导航滚动到最下方

标签 css ruby-on-rails ruby sass footer

这段代码似乎将我的页脚推得太低以至于不得不滚动,即使没有这样的内容。我做错了什么?

这是我的 application.html.erb 代码

 <body>
 <%= render 'layouts/header' %>

 <div id="wrap">
     <div class="container">
     <%= yield %>
     </div>
     <div id="push"></div>  
 </div>

 <%= render 'layouts/footer' %>
 </body>

这是_footer部分代码

<footer>
    <%= link_to "Blog", "#" %>
    <%= link_to "Twitter", "#" %>
    <%= link_to "About", about_path %>
 </footer>

这是应用程序的 scss 文件

 html,body{
    height: 100%;
 }

 #wrap{
     min-height: 100%;
     height: auto !important;
     height: 100%;
     margin: 0 auto -60px;
 }


 .container{
    padding-top: 60px;
 }

 #push, footer{
    height: 60px;

 }

 footer{
margin-top: -60px;
background-color: #f9f9f9;
 }


 @import 'bootstrap';

最佳答案

一切看起来都不错,但如果将 header 插入到 .wrap block 中会更正确

<body>
 <div id="wrap">
   <%= render 'layouts/header' %>

   <div class="container">
   <%= yield %>
   </div>
   <div id="push"></div>  
 </div>

 <%= render 'layouts/footer' %>

你可以添加 jsfiddle 吗?

关于css - Rails 应用程序中的粘性导航滚动到最下方,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21009126/

相关文章:

css - 如何通过定位 anchor 标记内的类来更改 anchor 标记中的颜色或文本?

html - 不使用 HTML 表格居中对齐

ruby-on-rails - 该 bundle 目前的 rails 锁定在 3.2.12。怎么办?

json - 如何验证我只从 JSON 响应中获得一个 key ?

ruby - 修改 self ,Ruby

css - Grunt、Bower 和 Bootstrap 3

html - BootStrap 和 CSS - 侧边栏

sql - rails : join query on association with class_name

javascript - Bundler for javascript,或者如何源代码控制外部 javascript 文件

ruby - 查找二叉树的最深节点