Bootstrap Responsive sticky footer

我一直在一個簡單的頁腳上停留1天，這個頁腳停留在頁面底部，不固定。Bootstrap Responsive sticky footer

我已經設法將它放在全屏幕頁面的底部。但是，當我減小瀏覽器窗口的寬度以模擬「響應式顯示」時，當向下滾動頁面時，頁腳停留在相同位置，因此不會刷新。

這裏是我的html：

<html> 
<body> 

<div class="container"> 

<div class="row text-center"> 

<p> Blablabla </p> 

</div> <!-- row --> 

</div> <!-- container --> 

    <div class="footer text-center"> 
      <p class="small">Alright !</p> 
    </div> 

</body> 
</html>

我的CSS：

html { 
height: 100%; 
} 

body { 
    height: 100%; 
    padding-bottom: 30px;   
} 

.footer { 
    position: absolute; 
    bottom: 0; 
    left: 0; 
    width: 100%; 
    height: 30px; 
}

我試圖引導的專欄上頁腳這樣的：

<div class="col-md-12 col-xs-12"> 

    <div class="footer text-center"> 
      <p class="small">&#169; 2017 Le Point G</p> 
     </div> 

</div>

但這種方法不似乎並不合適，因爲它使得它在我的不同頁面上不一致，因爲內容數量不同於一頁到另一個，或多或少地推下頁腳。

有什麼更好的建議嗎？

來源

2017-02-28 mattvent

你可以有position:absolute只需添加

min-height:100%;position:relative;

您的容器或行。

.row { 
 
min-height:100%; 
 
    position:relative; 
 
} 
 
html { 
 
height: 100%; 
 
} 
 

 
body { 
 

 
    
 
    padding-bottom: 30px;   
 
} 
 

 
.footer { 
 
position:absolute; 
 
    background-color: blue; 
 
    bottom: 0; 
 
    left: 0; 
 
    width: 100%; 
 
    height: 30px; 
 
}

<html> 
 
<head> 
 
<meta name="viewport" content="width=device-width, initial-scale=1"> 
 
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> 
 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
 
     <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
 
     
 
     <style type="text/css"> 
 
     
 

 
     </style> 
 
     <script type="text/javascript"> 
 
     
 
     </script> 
 
     </head> 
 
     <body> 
 
     
 
     
 

 
<div class="container"> 
 

 
<div class="row text-center" > 
 

 
<p> Blablabla </p> 
 

 
</div> <!-- row --> 
 

 
</div> <!-- container --> 
 

 
    <div class="footer text-center"> 
 
      <p class="small">Alright !</p> 
 
    </div> 
 

 

 
</body> 
 
</html>

說明

容器div有一個min-height:100% - 這將確保它保持畫面的完整高度，即使幾乎沒有任何內容。容器div設置爲position:relative;，這使我們可以將元素絕對定位在其中。頁腳在px中有一個設定的高度。頁腳絕對定位在底部：0，並將其移動到容器div的底部。當頁面上的內容很少時，容器div恰好是瀏覽器視圖端口的高度，因爲它設置爲min-height:100%，並且頁腳位於屏幕底部。當內容不止一頁時，容器div變大並向下延伸到視圖端口的底部 - 頁腳仍位於容器div的底部。頁腳也設置爲width:100%;，因此它覆蓋整個頁面。

來源

2017-02-28 13:56:49 neophyte

不過，如果我這樣做，它不會在一個頁面時停留在底部沒有足夠的內容來「推倒」。 – mattvent

你需要給你的身體一個最小寬度，這樣即使內容不夠長，頁腳仍留在底部 – neophyte

這個最小寬度需要多少？ – mattvent

如果我正確理解你的問題，你希望頁腳始終固定在窗口底部，不管頁面內容的長度如何。

如果是這樣，請嘗試position: fixed代替position: absolute

html { 
 
height: 100%; 
 
} 
 

 
body { 
 
    height: 100%; 
 
    padding-bottom:30px; 
 
} 
 

 
.footer { 
 
    position: fixed; 
 
    bottom: 0; 
 
    left: 0; 
 
    width: 100%; 
 
    height: 30px; 
 
    background-color:white; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<html> 
 
<body> 
 

 
<div class="container"> 
 

 
<div class="row text-center"> 
 

 
<h1>HTML Ipsum Presents</h1> 
 

 
<p><strong>Pellentesque habitant morbi tristique</strong> senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. <em>Aenean ultricies mi vitae est.</em> Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, <code>commodo vitae</code>, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. <a href="#">Donec non enim</a> in turpis pulvinar facilisis. Ut felis.</p> 
 

 
<h2>Header Level 2</h2> 
 

 
<ol> 
 
    <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li> 
 
    <li>Aliquam tincidunt mauris eu risus.</li> 
 
</ol> 
 

 
<blockquote><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus magna. Cras in mi at felis aliquet congue. Ut a est eget ligula molestie gravida. Curabitur massa. Donec eleifend, libero at sagittis mollis, tellus est malesuada tellus, at luctus turpis elit sit amet quam. Vivamus pretium ornare est.</p></blockquote> 
 

 
<h3>Header Level 3</h3> 
 

 
<ul> 
 
    <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li> 
 
    <li>Aliquam tincidunt mauris eu risus.</li> 
 
</ul> 
 

 
<pre><code> 
 
#header h1 a { 
 
    display: block; 
 
    width: 300px; 
 
    height: 80px; 
 
} 
 
</code></pre> 
 

 
</div> <!-- row --> 
 

 
</div> <!-- container --> 
 

 
    <div class="footer text-center"> 
 
      <p class="small">Alright !</p> 
 
    </div> 
 

 
</body> 
 
</html>

來源

2017-02-28 13:59:04 Mobius

如果我不清楚地表達自己，我很抱歉。我不希望它是固定的，而是總是在頁面的底部，尤其是當窗口寬度減小時，這正是我努力實現的目標。 – mattvent

我不確定你的意思是「總是在頁面的底部」，如果不是'固定的'。按頁面，你是指內容還是窗口？ – Mobius

隨着Bootstrap3你可以使用類navbar-fixed-bottom。它不是那麼好，但它的工作原理。

HTML：

<html> 
<head>..</head> 
<body>.... 
    <div class="navbar-fixed-bottom"> 
     <p>Your Text</p> 
    </div> 
</body> 
</html>

Something like that, but with "div" tags - w3schools

段：

html, body { 
 
    margin: 0%; 
 
    padding: 0%; 
 
} 
 

 
.container { 
 
    height: 600px; 
 
    background-color: #6c6c6c; 
 
} 
 

 
myFooter { 
 
    background-color: #fff; 
 
} 
 

 
@media screen and (min-width: 480px){ 
 
    footer { 
 
    position: absoulute; 
 
    bottom: 0; 
 
    background-color: #000 !important; 
 
    } 
 
}

<html> 
 
<head> 
 
    <meta charset="utf-8"> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
</head> 
 
<body> 
 
    <div class="container-fluid text-center"> 
 
    <p>Some Text in Container</p> 
 
    </div> 
 
    
 
    <footer class="myFooter text-center"> 
 
    <p>Footer Text - Resize Window</p> 
 
    </footer> 
 
</body>

來源

2017-02-28 14:02:17

對不起，誤會。我不希望頁腳被固定，但總是在頁面的底部，我在桌面頁面中完成了這一操作，但不是在移動頁面中。 – mattvent

比你可以添加類似'@media screen和（min-width：480px）'作爲CSS到類或頁腳。在那裏你可以添加像'position：fixed;'這樣的CSS規則來將頁腳設置爲頁面底部。 –

我編輯了我的答案。在這段代碼中，我在CSS中添加了@media ...。在這裏，您現在可以添加CSS來設置底部的頁腳，等等...... –

Bootstrap Responsive sticky footer

回答

相關問題