使用Google MDL將頁腳保持在頁面底部
[英]Keeping footer at the bottom of the page using Google MDL
問題描述
據我所知，這不是一個重復的問題，因為它與這個主題的其他問題有點不同。
我正在使用Google的Material Design Lite，並且頁腳不會正確地停留在頁面底部。
我已經看到使用這個技巧的不同修復程序
<div class="content">
<div class="header"></div>
<div class="body"></div>
<div class="footer"></div>
</div>
我嘗試過使用這種方法
#footer {
bottom: 0;
width: 100%;
position: absolute; (or fixed)
}
第一個選項不起作用，因為Material Design Lite實際上使用了頁腳標記。 說實話，我真的不想那樣做，因為它對我來說似乎有點草率。
頁腳的CSS方法幾乎可以工作但有一些問題。 當使用position: absolute; 它並不總是將頁腳保持在頁面底部，它有時會覆蓋內容。 當我嘗試fixed ，頁腳始終保持在頁面的底部，但是當頁面有足夠的內容滾動時，它會停留在屏幕的底部並覆蓋內容。 fixed和absolute都會將頁腳保持在屏幕的底部而不是頁面，這意味着當有足夠的內容滾動時，頁腳會覆蓋屏幕邊緣的內容。
fixed的行為可以在100％的時間內重現，但是對於absolute我還沒有弄清楚是什么原因導致它有時起作用而不是其他起作用。
這是我對頁腳的代碼
<footer class="mdl-mini-footer">
<div class="mdl-mini-footer--left-section">
<button class="mdl-mini-footer--social-btn social-btn social-btn__twitter">
<span class="visuallyhidden">Twitter</span>
</button>
<button class="mdl-mini-footer--social-btn social-btn social-btn__blogger">
<span class="visuallyhidden">Facebook</span>
</button>
<button class="mdl-mini-footer--social-btn social-btn social-btn__gplus">
<span class="visuallyhidden">Google Plus</span>
</button>
</div>
<div class="mdl-mini-footer--right-section">
<button class="mdl-mini-footer--social-btn social-btn__share">
<i class="material-icons" role="presentation">share</i>
<span class="visuallyhidden">share</span>
</button>
</div>
</footer>`
有沒有其他人有這個問題或對解決方案有任何想法？
編輯以添加更多信息：
問題不在於body的高度或html它們都是100％。
完整布局代碼
<body>
<div class="site mdl-layout mdl-js-layout">
<header class="mdl-layout__header mdl-layout__header--waterfall">
<div class="mdl-layout__header-row">
<!-- Header Content Here -->
</div>
</header>
<div class="mdl-layout__drawer">
<!-- Drawer Content -->
</div>
<main class="mdl-layout__content">
<!-- View Content Here -->
</main>
<footer class="mdl-mini-footer">
<!-- Footer Content -->
</footer>
<div class="mdl-layout__obfuscator"></div>
</div>
</body>
4 個解決方案
解決方案1
33 已采納 2015-10-27 15:05:46
我設法做到了：
1.沒有瀑布頭
- 將頁腳元素移動到主元素外部
- 將
.mdl-layout__content元素的樣式設置為“flex：1 0 auto”
例：
<body>
<div class="mdl-layout mdl-js-layout">
<header class="mdl-layout__header">
...
</header>
<main class="mdl-layout__content" style="flex: 1 0 auto;">
...
</main>
<footer class="mdl-mega-footer">
...
</footer>
</div>
</body>
2.帶瀑布頭
- 只需將頁腳元素移動到主元素外部即可
例：
<body>
<div class="site mdl-layout mdl-js-layout">
<header class="mdl-layout__header mdl-layout__header--waterfall">
<div class="mdl-layout__header-row">
<!-- Header Content Here -->
</div>
</header>
<div class="mdl-layout__drawer">
<!-- Drawer Content -->
</div>
<main class="mdl-layout__content">
<!-- Main Content -->
</main>
<footer class="mdl-mini-footer">
<!-- Footer Content -->
</footer>
</div>
</body>
測試：
解決方案2
4 2017-05-24 11:18:27
我遇到了同樣的問題，其中一個mdl-mini-footer與我的mdl-layout__content重疊。
我的解決方案是保持標簽分離，即
<main class="mdl-layout__content">
...
</main>
<footer class="mdl-mini-footer">
...
</footer>
並按如下方式修改類（從@KAD上面的第一個解決方案中獲取靈感）
.mdl-layout__content {
flex: 1 0 auto;
}
.mdl-mini-footer {
flex: 0 0 auto;
}
修改頁腳類是必要的，以阻止頁腳生長到我不想要的空間（ 0 0 auto的前0 ）。
解決方案3
2 2016-05-15 21:54:35
試試這個
<main class="mdl-layout__content">
<div class="page-content">
</div>
<div class="mdl-layout-spacer"></div>
<footer class="mdl-mini-footer">
<div class="mdl-mini-footer__left-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>
</main>
只需添加：
<div class="mdl-layout-spacer"></div>
后：
<div class="page-content"></div>
解決方案4
0 2016-07-18 17:57:11
我遇到了和你一樣的問題。 在瀏覽了許多教程和2個這樣的問題之后，我看了一下MDL提供的模板，並注意到頁腳包含在主要部分中。 我發現它非常反直覺，但是應該在結束標記之前指定頁腳元素，而不是在結束標記之后。 查看標記的屏幕截圖，該標記現在正常工作。 我正在TEDx GEC的網站上工作。 訪問tedx GEC網站以查看頁腳的操作。（更改將在20-07-2016之前上傳，之前訪問的任何人都會注意到頁腳與內容重疊。這是屏幕截圖： 請注意結束主標記位於頁腳之后。
保留頁腳和頁面底部
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.