页脚未进入正确位置

当我的页面上没有内容时，页脚上升。我的布局文件中的代码是这样的：页脚未进入正确位置

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

来源

2012-08-08 Sneha Kachroo

我想你应该创建一个页脚作为不影响任何情况下的绝对位置。你应该写一个css代码：

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

来源

2012-08-08 06:00:28

我试过，但脚注不向下移动，如果内容为多。 – 2012-08-08 08:18:32

使用 min-height财产which sets the minimum height of an element ..

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

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

希望日是有帮助的。

来源

2012-08-08 06:03:04 AlphaMale

当页面中有更多内容时，页脚就不会来自正确的位置。 – 2012-08-08 08:19:37

你可以显示问题的链接，或者你可以设置一个小提琴吗？ – AlphaMale 2012-08-08 08:25:23

我试过你的选择，但是当内容多于空白空间插入页面时。对于小内容，它工作正常。 – 2012-08-08 10:15:10

嘿有一种叫做粘脚的东西。当你谷歌这第一个链接宇得到是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-08 07:31:20

我读过那些粘滞便笺。但我没有得到哪个类使用，即包装和所有其他类 – 2012-08-08 08:17:33

嘿检查我的编辑.. – 2012-08-14 09:49:31

嘿，如果你发现这个答案正确，然后请投票 – 2012-08-14 09:55:37

页脚未进入正确位置

回答

相关问题