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

Compass 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 に答える