Question

我正在尝试在HTML5和CSS3中为我的网站实施一个STICKY FOOTER （未知高度）。我尝试了很多方法，但我的主要部分的margin似乎存在问题。

以下是我所拥有的：

＆＃13;

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

＆＃13;

<body>
  <header>
  </header>

  <div id="first">
  </div>

  <main id="main">
  </main>

  <footer>
  </footer>
</body>

＆＃13;

HEADER和FOOTER等于身体 - 所以，不再需要代码。

请注意：我已经使用 reset.css 自行完成所有操作！

以下是我在最后几个小时尝试的内容：

请不要推荐FLEXBOX - 这在移动设备和IE 10中不起作用。

Answer 1

我刚试了一个粘性页脚的东西，我正在添加它的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

Answer 2

我使用jQuery http://jsfiddle.net/ed4xe1z9/

为您做了一个示例

HTML

   <div id="wrap">
        <header>
            <p>The header</p>
        </header>
        <div id="main">
            <div class="the-margin">
                <div id="first">
                     <h1>First Content</h1>

                </div>
                 <h2>Main Content</h2>

            </div>
        </div>
    </div>
    <footer>
        <p>Sticky footer</p>
    </footer>

CSS

        * {
            margin: 0;
        }
        html, body {
            height: 100%;
        }
        #wrap {
            min-height: 100%;
        }
        body {
            background: #000;
            font-family: Arial;
            color: #fff;
        }
        #main {    
            overflow:auto;
        }
        .the-margin{
            margin: 50px;
        }
        footer {
            position: relative;
            clear:both;
        }

jQuery on document ready

$('#main').css('padding-bottom', $('footer').height());
$('footer').css('margin-top', -$('footer').height());

使用HTML5为所有浏览器使用pur CSS3粘贴页脚（具有未知高度）

2 个答案: