如何將頁腳保留在我網站上每頁的底部？

-1

所以我有這個頁腳，我想在我的網站的每一頁的底部定位。我嘗試使用絕對和固定位置，但沒有工作。下面是我有：如何將頁腳保留在我網站上每頁的底部？

<footer class="footer"> 
    <div id="ft"> 
    <div class="container"> 
     <div class="footer-grids"> 
      <div class="col-md-3 footer-grid"> 
       <h3>Анкети</h3> 
       <ul> 
        <li><a href="{{ url('https://docs.google.com/forms/d/1fpkJ1ndBO4YmyAk2UEfFYcR7m0HvAG-xH-dbolGtyE0/viewform') }}" 
        target="new">Анкета – нашият екологичен отпечатък</a></li> 
        <li><a href=" {{ url('https://docs.google.com/forms/d/1wuH3PC8Bl4YqZUwv_bYRMUC6QpV_JoZJnhDIEd3HtQk/viewform') }}" 
        target="new">Анкета с цел проучване обучението по чужд език.</a></li> 
       </ul> 
      </div> 
      <div class="col-md-3 footer-grid"> 
       <h3>ДЗИ и НВО</h3> 
       <ul> 
        <li><a href="{{ url('http://www.mon.bg/?') }}" target="new">18.05.2016 г. – ДЗИ по БЕЛ и НВО в VII клас 
        по БЕЛ</a></li> 
        <li><a href="{{ url('http://www.mon.bg/?') }}" target="new">20.05.2016 г. – Втори ДЗИ и НВО в VII клас 
        по математика</a></li> 
       </ul> 
      </div> 
      <div class="col-md-3 footer-grid"> 
       <h3>Други</h3> 
       <ul> 
        <li><a href="students#stipendii">Отпускане на стипендии</a></li> 
        <li><a href="{{ url('pdf/grafik_vakancii.pdf') }}" target="new">График на ваканциите и неучебните 
        дни за 2015/2016г.</a></li> 
       </ul> 
      </div> 
      <div class="col-md-3 footer-grid"> 
       <h3>Други</h3> 
       <ul> 
        <li><a href="#">PRESENTATIONS</a></li> 
        <li><a href="#">SEMINARS</a></li> 
       </ul> 
      </div> 
      <div class="clearfix"></div> 
     </div> 

    </div> 
    </div> 

</footer>

而且也對CSS：

.footer{ 
position: absolute; 
bottom: 0; 
width: 100%; 
background:#393939; 
} 
#ft{ 
    margin: 16px 0 0 5px; 
    color: rgb(249, 249, 184); 
    text-decoration: none; 
} 
#ft:hover{ 
    text-decoration: none; 
} 

.footer-grid ul{ 
padding:0; 
margin:0; 
} 
.footer-grid ul li{ 
    background: url(../images/arrow.png) no-repeat 0px 6px; 
    list-style-type: none; 
    display: block; 
    padding-left: 23px; 
    line-height: 2em; 
} 
.footer-grid ul li a{ 
    color: #757575; 
    font-size: 14px; 
    font-weight: 600; 
} 
.footer-grid ul li a:hover{ 
padding-left: 11px; 
color:rgb(240, 226, 134); 
} 
.footer p { 
margin:44px 0 0 0; 
font-size:14px; 
color: #c2c2c2; 
font-weight: 600; 
text-align:center; 
} 
.footer p a{ 
color:#fc3a3a; 
} 
.footer p a:hover{ 
color: #c2c2c2; 
} 
.footer-grid h3{ 
    margin: 0 0 20px 0; 
    font-size: 25px; 
    font-family: Comfortaa; 
    color: rgb(240, 226, 134); 
}

我一直在努力，現在解決這個問題相當長的一段時間，我將不勝感激，如果有人可以用給我一個手它:)

來源

2016-05-11 Stanislava Yaneva

您是否希望它超出頁面底部的內容，或者當內容很短時是否希望它錨定到頁面的底部？ – zzzzBov

我希望它成爲每頁底部的位置。但我的網頁不短，並滾動，所以這就是問題的來源。 –

從您的描述，它聽起來像你問一個重複的問題http://stackoverflow.com/q/12239166/497418，但請糾正我如果我錯了，誤解了你的想法。 – zzzzBov

一切工作在你的CSS很好，只是改變

.footer{ 
    position: absolute; 
    bottom: 0; 
    width: 100%; 
    background:#393939; 
}

到

.footer{ 
    position: fixed; 
    bottom: 0; 
    width: 100%; 
    background:#393939; 
}

來源

2016-05-11 17:03:12

但這樣它會一直顯示，但我只是希望它在頁面底部粘滯 –

如果你只是在最後插入html，它會得到你想要的結果。如果你希望在短頁面上堅持到底，而不是在滾動頁面上粘滯，那是另一回事。 –

嗯......我想你是用bootstrap吧？如果是的話，儘量讓你的頁腳爲「導航欄」，並將其與該固定在底部：

<nav class="navbar navbar-inverse navbar-fixed-bottom"> 
    <YOUR FOOTER> 
</nav>

也許這是不是最好的辦法。

來源

2016-05-11 17:26:13

如何將頁腳保留在我網站上每頁的底部？

回答

相關問題