Material Design Lite和Bootstrap粘腳頁腳

我正在構建一個網站，我使用Bootstrap Sticky Footer and Navbar。但是，藉助Google近期發佈的Material Design Lite庫，我希望將這些卡用於我的網站的一部分。但是，只要我包含MDL庫（只是CSS，沒有其他更改），我的粘腳就會有些奇怪。頁腳被設置在視口的底部（不管那個窗口的高度），但它只是粘在那裏。如果我向上滾動，它也滾動。Material Design Lite和Bootstrap粘腳頁腳

當我實際檢查頁腳，主體等時，沒有看到任何影響佈局的材質設計CSS。顯然有些事情，但我相當堅持它可能是什麼。（要看到它的工作，除去參考材料lite.css。這是目前段內打破。）

html { 
 
    position: relative; 
 
    min-height: 100%; 
 
} 
 
body { 
 
    margin-bottom: 60px; 
 
    padding-bottom: 20px; 
 
} 
 
footer { 
 
    position: absolute; 
 
    bottom: 0; 
 
    width: 100%; 
 
    height: 60px; 
 
    color: white; 
 
    background-color: black; 
 
} 
 
#footer-content { 
 
    margin: 20px 0; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> 
 
<link rel="stylesheet" href="https://storage.googleapis.com/code.getmdl.io/1.0.0/material.min.css" /> 
 
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" /> 
 

 
<nav class="navbar navbar-default navbar-fixed-top"> 
 
    <div class="container-fluid"> 
 
    <div class="navbar-header"> 
 
     <a asp-controller="Home" asp-action="Index" class="navbar-brand"> 
 
     <i class="fa fa-globe fa-lg visible-sm visible-xs"></i> 
 
     <i class="fa fa-globe fa-3x hidden-sm hidden-xs"></i> 
 
     </a> 
 
     <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> 
 
    </div> 
 
    <div class="navbar-collapse collapse"> 
 
     <ul class="nav navbar-nav main-links"> 
 
     <li><a asp-controller="Home" asp-action="Index">Home</a> 
 
     </li> 
 
     <li><a asp-controller="Home" asp-action="About">About</a> 
 
     </li> 
 
     </ul> 
 
    </div> 
 
    </div> 
 
</nav> 
 

 
<div class="container"> 
 
    <img src="http://placekitten.com/300/450" /> 
 
    <br/> 
 
    <img src="http://placekitten.com/300/450" /> 
 
    <br/> 
 
</div> 
 

 
<footer> 
 
    <div class="container"> 
 
    <div id="footer-content" class="pull-right"> 
 
     My Footer 
 
    </div> 
 
    </div> 
 
</footer>

來源

2015-07-13 JasCav

這應該可以解決您的問題。見plunker

html { 
    height: auto; 
}

來源

2015-07-13 07:50:19 yuyokk

是啊......那做了上述短期加。我完全錯過了material-lite.css的高度變化。（奇怪的是，Chrome將它命名爲「styleguide.css」）。無論如何，謝謝。 – JasCav

我認爲它顯示爲styleguide.css，因爲https://storage.googleapis.com/code.getmdl.io/1.0.0/material.min.css有一個sourceMappingURL集 – yuyokk

我找到了正確的解決方案，以粘底，即使新的選項卡的內容是不同的高度保持頁腳。

https://github.com/google/material-design-lite/issues/913

這個js小提琴專門進行了有益的HTML和CSS。

http://jsfiddle.net/eggbox/gk7u32b6/

在給你的HTML頁腳

<style> 
    .mdl-layout__content { 
    display: -webkit-flex; 
    display: -ms-flexbox; 
    display: flex; 
    -webkit-flex-flow: column nowrap; 
    -ms-flex-flow: column nowrap; 
    flex-flow: column nowrap; 
} 

.mdl-layout__content > *:not(.mdl-layout-spacer) { 
-webkit-flex: none; 
-ms-flex: none; 
flex: none; 
} 
</style> 

<div class="mdl-layout-spacer"></div> 

<footer class="mdl-mini-footer"> 
    <div class="mdl-mini-footer--middle-section"> 
    <div class="mdl-logo">Title</div> 
     <ul class="mdl-mini-footer--link-list"> 
     <li><a href="#">Help</a></li> 
     <li><a href="#">Privacy & Terms</a></li> 
     </ul> 
    </div> 
</footer>

來源

2015-12-16 08:54:55

Material Design Lite和Bootstrap粘腳頁腳

回答

相關問題