小编CJK*_*CJK的帖子

据我所知,这不是一个重复的问题,因为它与这个主题的其他问题有点不同.

我正在使用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> …

有没有办法将元素上的填充添加到min-height值中而不是包含在其中？例如，您10px在元素的顶部和底部有填充，并且高度的最小高度150px应该是170px而不是元素的高度130px+20px填充。

我目前正在使用 Material Design Lite 构建一个网站，它几乎为所有内容添加了填充，因此当您想要设置最小高度值时，必须始终在某些内容上找到填充，这有点痛苦。