0

我知道有很多问题询问如何制作粘性页脚和 100% 最小高度的主容器。但是我怎样才能有多个部分并让每个部分都达到 100% 的最小高度，同时仍然将页脚推到下面呢？

我有以下内容，部分很好，100%，但页脚没有被推下。

<html>
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <title>test</title>
    <style type="text/css" media="all">
      html, body, .main-container{height:100%;}
      section{min-height: 100%;}
      .footer-container{height: 100px;}
    </style>
  </head>
  <body>
    <div class="header-container">
      <header>
        header
      </header>
    </div>
    <div class="main-container">
      <section>
        section
      </section>
      <section>
        section2
      </section>
      <section>
        section3
      </section>
    </div>
    <div class="footer-container">
      <footer>
        footer
      </footer>
    </div>
  </body>
</html>

对应的jsFiddle：http: //jsfiddle.net/S7h8s/

4

2 回答 2

1

带有指南针 FTW 的粘性页脚！ http://compass-style.org/reference/compass/layout/sticky_footer/

于 2012-08-21T18:14:37.007 回答
0

我得到了这个工作，但不得不改变布局：

<html>
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <title>test</title>
    <style type="text/css" media="all">
      html, body {height:100%;}
      section{min-height: 100%;}
      .footer-container{height: 100px;}
    </style>
  </head>
  <body>
      <header>
        header
      </header>
      <section>
        section
      </section>
      <section>
        section2
      </section>
      <section>
        section3
      </section>
      <footer>
        footer
      </footer>
  </body>
</html>

jsFiddle：

http://jsfiddle.net/S7h8s

于 2012-12-21T23:49:22.507 回答