頁腳未進入正確位置

當我的頁面上沒有內容時，頁腳上升。我的佈局文件中的代碼是這樣的：頁腳未進入正確位置

<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

頁腳未進入正確位置

回答

相關問題