jquery - 所有浏览器都使用 HTML5 的带有 pur CSS3 的粘性页脚(高度未知)

我正在尝试使用 HTML5 和 CSS3 为我的网站实现一个粘性页脚(高度未知)。我已经尝试了很多方法，但我的主要部分的margin 似乎有问题。

这是我的:

 body {
   background: #000;
   font-family: Arial;
 }
 main {
   margin: 50px;
 }

<body>
  <header>
  </header>

  <div id="first">
  </div>

  <main id="main">
  </main>

  <footer>
  </footer>
</body>

HEADER 和 FOOTER 等同于正文 - 因此，无需更多代码。

请注意:我已使用 reset.css 自行完成所有操作!

这是我最近几个小时尝试的方法:

请不要推荐 FLEXBOX - 它不适用于移动设备和 IE 10。

最佳答案

我刚刚为粘性页脚尝试了一件事，我正在添加它的 html 和 css3 代码。

我也给出了引用站点。

HTML

<div id="wrap">

    <div id="header">

    </div>

    <div id="main">

    </div>

</div>

<div id="footer">

</div>

正文内容应该在包装内。

CSS

html, body {height: 100%;}

#wrap {min-height: 100%;}

#main {overflow:auto;
    padding-bottom: 150px;}  /* must be same height as the footer */

#footer {position: relative;
    margin-top: -150px; /* negative value of footer height */
    height: 150px;
    clear:both;} 

/*Opera Fix*/
body:before {
    content:"";
    height:100%;
    float:left;
    width:0;
    margin-top:-32767px;/
}

我引用了以下网站的粘性页脚

http://www.cssstickyfooter.com

关于jquery - 所有浏览器都使用 HTML5 的带有 pur CSS3 的粘性页脚(高度未知)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/26017624/

jquery - 所有浏览器都使用 HTML5 的带有 pur CSS3 的粘性页脚(高度未知)

上一篇：jQuery 幻灯片画廊图像连续出现两次

下一篇：css - 为未定义宽度的容器换行