在頁面底部的引導頁腳

我已閱讀了很多關於此的帖子，但我仍然沒有找到答案。 我有一個頁腳，我想要在頁面的末尾，而不是固定的。 問題是頁腳是內容結束的地方。看圖片。在頁面底部的引導頁腳

這是我的HTML：

<!DOCTYPE html> 
<html> 
    <head> 
     <meta charset="utf-8"/> 
     <title> Mobtech - Privatni korisnici </title> 

     <!--Ubaci bootstrap css --> 
     <link rel="stylesheet" href="css/bootstrap.min.css"> 
     <link rel="stylesheet" href="css/style.css"> 
     <link rel="css/basic-template.css" rel="stylesheet"> 
     <link href="https://fonts.googleapis.com/css?family=Roboto+Condensed" rel="stylesheet"> 

    </head> 
    <body> 
     <!--Navigation bar --> 
     <nav class="navbar navbar-default" role="navigation"> 
      <div class="container"> 
       <div class="navbar-header"> 
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-container"> 
         <span class="sr-only"> Pokazi i sakrij navigaciju </span> 
         <span class="icon-bar"></span> 
         <span class="icon-bar"></span> 
         <span class="icon-bar"></span> 
        </button> 
        <a class="navbar-brand" href="#"> 
         <span> <img src="Slike/logo.png" alt="LogoSlika"/> </span> 
         <font face="Roboto Condensed" size="4" color="green"> Mobtech </font> 
        </a> 
       </div> 
       <div class="collapse navbar-collapse" id="navbar-container"> 
        <ul class="nav navbar-nav navbar-right"> 
         <li><a href="index.html"> Početna strana </a> </li> 
         <li class="active"><a href="#"> Privatni korisnici </a> </li> 
         <li><a href="poslovni.html"> Poslovni korisnici </a> </li> 
         <li><a href="uredjaji.html"> Uređaji </a> </li> 
         <li><a href="onama.html"> O Nama </a> </li> 
        </ul> 
       </div> 
      </div> 
     </nav> 

     <br /> 
      <div class="container"> <!--Container --> 

       <div class="row"> 
        <!-- Kolona na velikom ekranu (lg) prikazuje duzinu jedne kolone, Ekstra small (xs) prikazuje 4 kolone --> 
        <div class="col-lg-12 bg-success"> 
         <p> Outer div </p> 
         <div class="col-lg-6 bg-primary"> 
          <p> Inner div </p> 
         </div> 
        </div> 
       </div> 
      </div> 

      <!-- Footer --> 
      <footer class="mojFooter"> 
       <font face="Roboto Condensed" size="4"> <center> 
       <div class="container"> 
        <div class="row" style="margin-top: 7px;"> 
         <p> &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &copy; Copyright Ivan Prošić 2016.</p> 
        </div> 
        <div class="bottom-footer"> 
         <div class="col-md-12"> 
          <ul class="footer-nav"> 
           <li> <a href="https://www.facebook.com/"> Facebook </a> </li> 
           <li> <a href="https://twitter.com/"> Twitter </a> </li> 
           <li> <a href="https://plus.google.com/"> Google+ </a> </li> 
          </ul> 
         </div> 
        </div> 
       </div> 
       </font> </center> 
      </footer> 



      <!-- JavaScript fajl --> 
      <script src="js/jquery.min.js"></script> 
      <!-- Kompresovan JavaScript fajl --> 
      <script src="js/bootstrap.min.js"></script> 
    </body> 
</html>

這是我的CSS，只有頁腳：

.mojFooter{ 
    background-color: #f8f8f8; 
    color: #00a651; 
    padding-top: 0px; 
    border-top: 1px solid #e7e7e7; 
    margin-bottom: 0px; 
} 

.bottom-footer{ 
    border-top: 1px solid #00a651; 
    margin-top: 0px; 
    padding-top: 7px; 
    color: #00a651; 

} 

.footer-nav li{ 
    display: inline; 
    padding: 0px 40px; 
} 

.footer-nav a{ 
    color: grey; 
    text-decoration: none; 
}

來源

2016-11-28 Ivan

所以換句話說，您希望頁腳位於頁面的末尾，而不是固定的，除非內容比瀏覽器窗口短，那麼您希望頁面固定在頁面的底部？ – andi

你有我的答案在這裏http://stackoverflow.com/a/24916228/1804107 – Aleksandar

我不能沒有發表評論，所以希望這會回答你題。我有點不清楚你的意思是「頁面末尾，沒有固定」，顯然你不是指在內容的末尾......

無論如何，如果你正在尋找一個頁腳，將永遠是在底部，但不是粘頁腳到這裏看看：Stackoverflow Flushing Footer

如果你正在尋找一個粘型頁腳嘗試Stackoverflow Sticky Footer

注意上面的鏈接是不同版本的自舉，但如果它們不適用於您使用的任何版本，請不要進行太多調整。

來源

2016-11-28 21:51:33 dpp

針對您的問題的最簡單的跨瀏覽器解決方案是爲body對象設置最小高度。然後用bottom: 0規則爲您的頁腳設置absolute位置。

body { 
    min-height: 100vh; 
    position: relative; 
    margin: 0; 
} 

footer { 
    position: absolute; 
    bottom: 0; 
}

請檢查下面的例子： FIDDLE

來源

2016-11-28 21:56:16 luke

這隻適用於如果你不必scol。 – smoes

你是對的 - 我錯過了身體上的相對位置，最小高度應該是100vh而不是100％... – luke

謝謝！它幫助我。 –

你可以只添加風格=「最小高度：100vh」到你的頁面內容conteiner並將頁腳在另一個conteiner

來源

2018-02-14 23:18:12

在頁面底部的引導頁腳

回答

相關問題