Html CSS多个最小高度：100%节，带粘性页脚_Html_Css_Height

Html CSS多个最小高度：100%节，带粘性页脚

html css

Html CSS多个最小高度：100%节，带粘性页脚,html,css,height,Html,Css,Height,我知道有很多问题要问如何制作一个粘脚和100%最小高度的主容器。但我如何能有多个部分，并使每个部分100%最小高度，同时仍然推动下面的页脚我有以下内容，各部分都很好，100%，但页脚没有向下推 <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title>test</title> <

我知道有很多问题要问如何制作一个粘脚和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>


测试
html，正文，.主容器{高度：100%；}
截面{最小高度：100%；}
.footer容器{高度：100px；}
标题
部分
第2节
第三节
页脚

对应的JSFIDLE:

带指南针FTW的粘性页脚！

我完成了这项工作，但不得不更改布局：

<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>


测试
html，正文{高度：100%；}
截面{最小高度：100%；}
.footer容器{高度：100px；}
标题
部分
第2节
第三节
页脚

JSFIDLE：