0

私は現在、ある種の粘着性のあるフッターを必要とするWebサイトに取り組んでいますが、すべての場所で作業しているわけではありません。

したがって、http：//www.hostcule.org/newsite/

ホームページの場合、フッターは自動的に下部に貼り付けられますが、他のページの場合は、http：//www.hostcule.org/newsite/about-usなどではありません。

CSSを使用して、CSSを下部に固定するにはどうすればよいですか？

フッターdivの現在のCSS

#footer{
    clear:both;
    float:left;
    width:100%;
    border-top:solid 1px #d1d0d0;
    background-color:#f1efef;
    margin-bottom:-10px;
}
4

1 に答える 1

0

私がこれまでにできた最善の方法は、フッターをページの下部から離して、常に画面の下部から離すことです。以下は、これを行う方法の例です。stickyfooterfail 部門が機能せず、その理由はわかりませんが、absolute に変更すると、bottomプロパティは適切に機能しますposition。

<html>
  <head>
    <style type='text/css'>
body {
height: 100%;
}

#fullheight {
background:#ff0;
position: relative;
min-height: 100%;
}
#stickyfooterfail {
position: relative;
bottom: 0px;
}

#stickyfooter {
background: #f0f;
}
    </style>
  </head>
  <body>
    <div id='fullheight'>
      Some text<br>
      Some text<br>

      Some text<br>
      <div id='stickyfooterfail'>
        Should be at the bottom but isn't
      </div>
    </div>
    <div id='stickyfooter'>
        This is pushed off the bottom by the min-height attribute of #fullheight
    </div>
  </body>
</html>

フッターが一定の絶対サイズになることがわかっている場合は、padding-bottom-(高さ) に設定できます。たとえば、高さが 40px の場合は -40px に設定bottomし、#stickyfooterfail を同じ値に設定します。

于 2009-12-19T16:16:52.493 に答える