html – 使用Google MDL在页面底部保持页脚_html-js-css

概述据我所知,这不是一个重复的问题,因为它与其他问题有所不同. 我正在使用Google的Material Design Lite,页脚不会停留在页面底部. 我看到使用这个技巧的不同修复 <div class="content"> <div class="header"></div> <div class="body"></div> <div class="footer"></d 据我所知,这不是一个重复的问题,因为它与其他问题有所不同.

我正在使用Google的Material Design lite,页脚不会停留在页面底部.

我看到使用这个技巧的不同修复

<div >    <div ></div>    <div ></div>    <div ></div></div>

我试过使用这种方法

#footer {   bottom: 0;   wIDth: 100%;   position: absolute; (or fixed)}

第一个选项不起作用,因为Material Design lite实际上使用了页脚标签.说实话,我真的不想这样做,因为对我来说似乎是一种马虎.

页脚的CSS方法几乎可以工作,但有一些问题.当使用position：absolute;它并不总是将页脚保持在页面底部,有时会覆盖内容.当我尝试固定页脚总是保持在页面的底部,但是当页面有足够的内容滚动它保持在屏幕的底部,并涵盖内容.固定和绝对都将页脚保持在屏幕的底部,而不是页面,这意味着当内容足够的内容可以滚动页脚覆盖屏幕边缘的内容.

固定的行为可以在100％的时间内复制,但绝对的,我还没有弄清楚什么原因是有时候而不是别的.

这是我对页脚的代码

<footer >    <div >        <button >            <span >Twitter</span>         </button>         <button >            <span >Facebook</span>         </button>         <button >             <span >Google Plus</span>         </button>     </div>     <div >         <button >             <i  role="presentation">share</i>             <span >share</span>         </button>     </div></footer>`

有没有人有这个问题或有任何想法解决方案？

编辑以添加更多信息：

问题不在于身体的高度或HTML,他们都在100％.

全布局代码

<body>  <div >               <header >        <div >            <!-- header Content Here -->        </div>    </header>    <div >        <!-- Drawer Content -->    </div>    <main >         <!-- VIEw Content Here -->    </main>    <footer >        <!-- Footer Content -->    </footer>    <div ></div>  </div></body>

解决方法我设法做到：

没有瀑布头

>将页脚元素移到主要元素之外
>将.mdl-layout__content元素的样式设置为“flex：1 0 auto”

例：

<body>  <div >    <header >      ...    </header>    <main  >      ...    </main>    <footer >      ...    </footer>  </div></body>

用瀑布头

>只需将页脚元素移到主元件外

例：

<body>    <div >                 <header >          <div >              <!-- header Content Here -->          </div>      </header>      <div >          <!-- Drawer Content -->      </div>      <main >          <!-- Main Content -->      </main>      <footer >          <!-- Footer Content -->      </footer>    </div>  </body>

测试：

>短内容：http://codepen.io/kabudahab/pen/vGdVQM
>内容长：http://codepen.io/kabudahab/pen/JXpmpv

总结

以上是内存溢出为你收集整理的html – 使用Google MDL在页面底部保持页脚全部内容，希望文章能够帮你解决html – 使用Google MDL在页面底部保持页脚所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。

欢迎分享，转载请注明来源：内存溢出

原文地址: http://outofmemory.cn/web/1091400.html