我目前正面臨Google Material Design Lite的問題。如果您查看Google https://getmdl.io/templates/portfolio/about.html的投資組合示例並模擬大屏幕,則頁腳不會停留在底部。有沒有解決方案?Google材料設計頁腳始終在頁面底部/底部
我發現了兩個類似的問題,但它們是關於粘性頁腳的。我希望頁腳始終位於頁面的末尾,並且如果頁面是可滾動的,則頁腳只能在底部顯示。
我目前正面臨Google Material Design Lite的問題。如果您查看Google https://getmdl.io/templates/portfolio/about.html的投資組合示例並模擬大屏幕,則頁腳不會停留在底部。有沒有解決方案?Google材料設計頁腳始終在頁面底部/底部
我發現了兩個類似的問題,但它們是關於粘性頁腳的。我希望頁腳始終位於頁面的末尾,並且如果頁面是可滾動的,則頁腳只能在底部顯示。
你需要把你的設定具體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');
讓我知道如果這是你想要的
圍繞現有的代碼添加包裝類。使包裝類相對定位。獲得頁腳的高度並明確聲明。將相同的值作爲填充底部分配給包裝類。
.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;
}
「如果頁面是可滾動的,頁腳只能在底部顯示。」 – Goombah
謝謝Saurav Rastogi!正如@Goombah指出的那樣,即使您不在頁面底部,這也會將頁腳始終粘貼到頁面的底部。 –
@KaRl @Goombah是的!它是我的壞事。我已經更新了我的答案,這將起作用。您只需根據導航欄的高度更改'min-height'的條件。 –