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

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-08T06:03:04.330 に答える
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 に答える
0

どのような場合でも影響を受けない絶対位置としてフッターを作成する必要があると思います。次のように CSS コードを記述します。

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