0

この質問が何度も寄せられていることは知っていますが、実際に役立つ解決策は見つかりませんでした.

私のHTML...

<body>
      <div id="container">
      </div>
      <div id="footer">
      </div>
</body>

私のcss....

body, html { min-height:100%;}

#container
  width: 980px;
  min-height: 100%;
  margin: 0 auto;}

footer {
  background-color: rgb(90,200,219);
  height: 50px;
  position: realative;
  margin-top: -50px;
  width: 100%; }

何が起こっているかというと、フッターが完全にページの下部にくっついています。しかし、コンテンツが短い場合でも、下にくっついているフッターを見つけるために下にスクロールする必要があります。誰かが私のコードで何が間違っているか教えてもらえますか?

4

2 に答える 2

1

要旨にまとめたこれらの方法を試してください。https://gist.github.com/derek-duncan-snippets/4228927

body, html { /*body and html have to be 100% to push header down */
    height:100%;
    width: 100%;
}
body > #wrapper { /* all content must be wrapped... #wrapper is my id.  Position relative IMPORTANT */
    position: relative;
    height: auto;
    min-height: 100%;
}
#header {
    height: 100px;
    background: rgba(255,255,255,0.2);
}
#content-wrap { /*#content-wrap is the wrapper for the content without header or footer | padding-bottom = footer height */
    padding-bottom: 100px;
}
#footer { /* position must be absolute and bottom must be 0 */
    height: 100px;
    width: 100%;
    background: rgba(255,255,255,0.2);
    position: absolute;
    bottom: 0;
}
于 2013-04-18T21:48:12.913 に答える