Bootstrap 3和Sticky Footer

過去一小時我一直在試圖弄清楚我的粘性頁腳不工作到底是什麼問題。我有和getboostrap網站上給出的例子完全相同的結構，但它似乎不起作用。任何想法什麼是完全錯誤的？Bootstrap 3和Sticky Footer

所有的引導程序css文件加載正確。

<body style=""> 

    <div id="wrap"> 
     <div class="navbar navbar-inverse navbar-fixed-top"> 
      <div class="container"> 
       <div class="navbar-header"> 
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> 
         <span class="icon-bar"></span> 
         <span class="icon-bar"></span> 
         <span class="icon-bar"></span> 
        </button> 
        <a class="navbar-brand" href="/">Application name</a> 
       </div> 
       <div class="collapse navbar-collapse"> 
        <ul class="nav navbar-nav"> 
         <li><a href="/">Home</a></li> 
         <li><a href="/Home/About">About</a></li> 
         <li><a href="/Home/Contact">Contact</a></li> 
        </ul> 
         <ul class="nav navbar-nav navbar-right"> 
     <li><a href="/Account/Register" id="registerLink">Register</a></li> 
     <li><a href="/Account/Login" id="loginLink">Log in</a></li> 
    </ul> 

       </div> 
      </div> 
     </div> 


     <div class="container"> 



<div class="jumbotron"> 
    <h1>ASP.NET</h1> 
    <p class="lead">ASP.NET is a free web framework for building great Web sites and Web applications using HTML, CSS and JavaScript.</p> 
    <p><a href="http://asp.net" class="btn btn-primary btn-large">Learn more »</a></p> 
</div> 
<div class="row"> 
    <div class="col-md-4"> 
     <h2>Getting started</h2> 
     <p> 
      ASP.NET MVC gives you a powerful, patterns-based way to build dynamic websites that 
      enables a clean separation of concerns and gives you full control over markup 
      for enjoyable, agile development. 
     </p> 
     <p><a class="btn btn-default" href="http://go.microsoft.com/fwlink/?LinkId=301865">Learn more »</a></p> 
    </div> 
    <div class="col-md-4"> 
     <h2>Get more libraries</h2> 
     <p>NuGet is a free Visual Studio extension that makes it easy to add, remove, and update libraries and tools in Visual Studio projects.</p> 
     <p><a class="btn btn-default" href="http://go.microsoft.com/fwlink/?LinkId=301866">Learn more »</a></p> 
    </div> 
    <div class="col-md-4"> 
     <h2>Web Hosting</h2> 
     <p>You can easily find a web hosting company that offers the right mix of features and price for your applications.</p> 
     <p><a class="btn btn-default" href="http://go.microsoft.com/fwlink/?LinkId=301867">Learn more »</a></p> 
    </div> 
</div> 
     </div> 

    </div> 

    <div id="footer"> 
     <div class="container"> 
      <p class="text-muted credit">Example courtesy <a href="http://martinbean.co.uk">Martin Bean</a> and <a href="http://ryanfait.com/sticky-footer/">Ryan Fait</a>.</p> 
     </div> 
    </div> 


</body>

我找到了解決方案。我認爲包括所有的CSS也會有頁腳的CSS，但顯然它沒有。您需要以下，使粘頁腳工作，引導

html, 
body { 
    height: 100%; 
    /* The html and body elements cannot have any padding or margin. */ 
} 

/* Wrapper for page content to push down footer */ 
#wrap { 
    min-height: 100%; 
    height: auto !important; 
    height: 100%; 
    /* Negative indent footer by its height */ 
    margin: 0 auto -60px; 
    /* Pad bottom by footer height */ 
    padding: 0 0 60px; 
} 

/* Set the fixed height of the footer here */ 
#footer { 
    height: 60px; 
    background-color: #f5f5f5; 
}

來源

2013-09-28 teh0wner

我覺得很難相信，這是修復頁腳底部的簡單的解決方案。 – JohnAllen

我會建議你這樣的解決方案：https://gist.github.com/martinbean/1855032 – Manza

做了一個快速撥弄你的代碼和一些調整頁腳：http://jsfiddle.net/2Zaxt/。

<div id="footer" class="container"> 
    <nav class="navbar navbar-default navbar-fixed-bottom"> 
     <div class="navbar-inner navbar-content-center"> 
      <p class="text-muted credit">Example courtesy <a href="http://martinbean.co.uk">Martin Bean</a> and <a href="http://ryanfait.com/sticky-footer/">Ryan Fait</a>.</p> 
     </div> 
    </nav> 
</div>

來源

2013-09-28 19:36:38

+16

你舉的例子是「固定」的頁腳，而不是粘的。無論垂直內容長度如何，固定總是可見的。粘滯的「粘在底部」，所以當有足夠的垂直內容需要向下滾動時可見，而在底部只有最小的內容時不可見。 –

我可以看到哪裏的命名不總是清楚的，但這絕對讓我得到我想要的結果。謝謝。 – Rig

完美的..... –

html, 
body { 
    height: 100%; 
    /* The html and body elements cannot have any padding or margin. */ 
} 

/* Wrapper for page content to push down footer */ 
#wrap { 
    min-height: 100%; 
    height: auto !important; 
    height: 100%; 
    /* Negative indent footer by its height */ 
    margin: 0 auto -60px; 
    /* Pad bottom by footer height */ 
    padding: 0 0 60px; 
} 

/* Set the fixed height of the footer here */ 
#footer { 
    height: 60px; 
    background-color: #f5f5f5; 
}

來源

2013-09-29 11:31:00 teh0wner

這是如何爲我工作。

我增加了頁腳ID和自定義樣式值是ID和相同的外觀和感覺，增加了「導航欄默認」

HTML

<div id="footer" class="navbar-default"> 
    <div class="container"> 
    <p>Your Footer Content Here</p>   
    </div> 
</div>

CSS

#footer { 
    background-color: #F5F5F5; 
    bottom: 0; 
    height: 60px; 
    position: relative; 
    width: 100%; 
}

來源

2014-03-17 12:59:18 Joshua

爲什麼您不使用：

.navbar-fixed-bottom

這將解決您的底部固定導航問題，您可以放置任何東西。

來源

2014-06-12 14:19:39

那是在喬治Durzi的回答 – Jordan

2013年九月，但對你的答案並得到正確的地步.. – Jordan

這不是一個棘手的頁腳，頁腳粘停留在底部是唯一可見當您向下滾動頁面時。 – Manza

你可以找到一個例子的引導文件中（固定在頁面的頂部）「與固定導航欄粘頁腳」：http://getbootstrap.com/examples/sticky-footer-navbar/

CSS：

/* Sticky footer styles */ 
html { 
    position: relative; 
    min-height: 100%; 
} 
body { 
    /* Margin bottom by footer height */ 
    margin-bottom: 60px; 
} 
#footer { 
    position: absolute; 
    bottom: 0; 
    width: 100%; 
    /* Set the fixed height of the footer here */ 
    height: 60px; 
    background-color: #f5f5f5; 
} 

/* Fixed navbar styles */ 
body > .container { 
    padding-top: 60px; 
}

來源

2014-06-24 09:06:18

簡單獨特的解決方案對@ teh0wner粘頁腳BAES，我加入了一些JS

CSS

html { 
    position: relative; 
    min-height: 100%; 
} 
footer { 
    position: absolute; 
    bottom: 0; 
    width: 100%; 
}

$(document).ready(function() { 
    var height = $('footer').height(); 
    $('body').css({ 
     "margin-bottom": height 
    }); 
});

來源

2014-09-26 05:48:23

在引導3，容器和頁腳類，不知何故重寫你的CSS規則。我試圖改變我的頁腳的背景色。我嘗試了許多在網絡上找到的解決方案，但無法成功完成。在使用頁腳的clearfix類後，頁面變成了我真正想看到的內容。

.myFooter { 
 
    background-color: #c4a9f1; 
 
    width: 100%; 
 
} 
 
.hi-icon a { 
 
    display: block; 
 
    width: 100%; 
 
    height: 100%; 
 
    position: absolute; 
 
    top: 0px; 
 
    z-index: 100; 
 
}

<footer class="footer clearfix"> 
 
    <div class="container myFooter"> 
 
    <div class=" "> 
 
     <div class="col-sm-3"> 
 
     <h3 class="page-header">Part 1 </h3> 
 
     <ul> 
 
      <li>Link1</li> 
 
      <li>Link2</li> 
 
      <li>Link3</li> 
 
      <li>Link4</li> 
 
     </ul> 
 
     </div> 
 
     <div class="col-sm-3"> 
 
     <h3 class="page-header">Part 2</h3> 
 
     <ul> 
 
      <li>Link1</li> 
 
      <li>Link2</li> 
 
      <li>Link3</li> 
 
      <li>Link4</li> 
 
     </ul> 
 
     </div> 
 

 

 
    </div> 
 
    </div> 
 
    </div> 
 
</footer>

來源

2017-01-25 19:02:21

Bootstrap 3和Sticky Footer

回答

相關問題