Question

当我的页面上没有内容时，页脚会上升。布局文件中的代码是：

<div class="container-fluid">
  <div class="row-fluid">
     <!--<div class="span3">
      <div class="well sidebar-nav">
        <ul class="nav nav-list">
          <li class="nav-header">Sidebar</li>
            <li><%#= link_to "Link1", "/path1"  %></li>
            <li><%#= link_to "Link2", "/path2"  %></li>
            <li><%#= link_to "Link3", "/path3"  %></li>
        </ul>
      </div><!/.well -->
    <!-- </div> -->
    <div class="span9">
      <div id="alert">
          <% flash.each do |key, value| %>
         <%= content_tag :div, :id=>'flash_msg', :class => "alert alert-#{key}" do %>
         <%= value unless value.blank? %>                         
         <a class="close" data-dismiss="alert">×</a>
         <% flash.discard -%> 
       <% end %>
      <% end %>   
      </div>   
      <%= yield %>
    </div>
  </div><!--/row-->
<footer class="footer-fix">
    <p>&copy; <%= Time.now.strftime("%Y") -%> Icicle Technologies Private Limited </p>
</footer>
</div> <!-- /container -->

当我将页脚放在容器流体类之外时，我也遇到了同样的问题。我可以在css中包含什么。有人能帮我吗？对于页脚修复，css是：

.footer-fix{
    text-align: center;
}

Answer 1

使用 min-height 属性which sets the minimum height of an element ..

.content-holder //whatever your div is { min-height:500px; }

<强>的jsfiddle：的 http://jsfiddle.net/Cg9YZ/

希望这有帮助。

Answer 2

我认为你应该创建一个页脚作为绝对位置，在任何情况下都不会受到影响。你应该写一个css代码：

 .footer-fix
 {
      position:absolute;
      left:0px;
      bottom:0px;
      text-align:center;
      ...
 }

Answer 3

嘿，有一种称为粘性页脚的东西。当你谷歌这个第一个链接你得到的是ryanfait.com。他已经为同一个问题提供了css。

结构如何：

<html>
<head></head>
<body>
<div class="wrapper">Your contents other than footer content go here</div>
<div class="footer">footer content go here</div>
</body>

这将解决您的问题：

* {
margin: 0;
}
html, body {
height: 100%;
}
.wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -142px; /* the bottom margin is the negative value of the footer's     height */
}
.footer, .push {
height: 142px; /* .push must be the same height as .footer */
}

页脚没有进入适当的位置

3 个答案: