Google材料設計頁腳始終在頁面底部/底部

Question

我目前正面臨Google Material Design Lite的問題。如果您查看Google https://getmdl.io/templates/portfolio/about.html的投資組合示例並模擬大屏幕，則頁腳不會停留在底部。有沒有解決方案？

我發現了兩個類似的問題，但它們是關於粘性頁腳的。我希望頁腳始終位於頁面的末尾，並且如果頁面是可滾動的，則頁腳只能在底部顯示。

Answer 1

你需要把你的設定具體min-height到.mdl-grid.portfolio-max-width，

就像：

/* When the Navbar is big */ 
.mdl-grid.portfolio-max-width { 
    min-height: calc(100vh - 316px); 
} 

/* When the Navbar is small */ 
.mdl-grid.portfolio-max-width { 
    min-height: calc(100vh - 180px); 
} 

這將工作。

希望這會有所幫助！

編輯

我最終的解決方案：

/* When the Navbar is big */ 
.mdl-grid.portfolio-max-width { 
    min-height: calc(100vh - 316px); 
    display: block; 
} 

/* When the Navbar is small */ 
.mdl-layout__content.header-is-compact > .mdl-grid.portfolio-max-width { 
    min-height: calc(100vh - 137px); 
} 

及以下線路到MDL JavaScript文件中的滾動處理：

this.content_.classList.add('header-is-compact'); 
 
// the following line to the else if where all the classes get removed 
 
this.content_.classList.remove('header-is-compact');

Answer 2

讓我知道如果這是你想要的

圍繞現有的代碼添加包裝類。使包裝類相對定位。獲得頁腳的高度並明確聲明。將相同的值作爲填充底部分配給包裝類。

.wrapper{ 
    position:relative; 
    padding-bottom:75px; 
} 
#textbox { 
background:rgba(255,255,255,1); 
padding:10px; 
font-family:arial; 
z-index:-1; 
box-shadow:0 0 30px rgba(000,000,000,1); 
border-radius:10px; 
line-height:25px; 
display:block; 
} 


#footer { 
background-color:white; 
width:50000px; 
position:absolute; 
bottom:0px; 
left:0px; 
color:black; 
font-family:arial; 
border:0px; 
margin:0px; 
display:block; 

height:75px; 
}