0

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

<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;
}
4

3 回答 3

1

使用 最小高度属性which sets the minimum height of an element..

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

JsFiddle：http: //jsfiddle.net/Cg9YZ/

希望这可以帮助。

于 2012-08-08T06:03:04.330 回答
0

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

 .footer-fix
 {
      position:absolute;
      left:0px;
      bottom:0px;
      text-align:center;
      ...
 }
于 2012-08-08T06:00:28.443 回答
0

嘿，有一种叫做粘性页脚的东西。当你用谷歌搜索这个时，你得到的第一个链接是 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 */
}
于 2012-08-08T07:31:20.180 回答