7

スティッキーフッターについて知っています。しかし、私の状況では、PC とモバイル デバイスで使用される Web サイトを開発しています。したがって、表示されるフッターは画面の幅によって調整されます。

また、フッターの高さは解像度ごとに変化します。

ページの下部(画面ではなく)にフッターを表示するにはどうすればよいか、誰でも考えられますか? 一部のページの高さが小さく、フッターがページの間に表示されます。

私は次の構造を持っています：

<body style="height:100%;">
 <div style="height:100%;">
  <div id="wrapper" style="height:100%; max-width:800px;">
   <div id="header">
    some content
   </div>
   <div id="content">
    some content
   </div>
   <div id="footer" style="position:relative; width:100%;">
    some content
   </div>
  </div>
 </div>
</body>
4

1 に答える 1

23

これは何かをクリアするかもしれません:

http://matthewjamestaylor.com/blog/keeping-footers-at-the-bottom-of-the-page

html,
body {
   margin:0;
   padding:0;
   height:100%;
}
#container {
   min-height:100%;
   position:relative;
}
#header {
   background:#ff0;
   padding:10px;
}
#body {
   padding:10px;
   padding-bottom:60px;   /* Height of the footer */
}
#footer {
   position:absolute;
   bottom:0;
   width:100%;
   height:60px;   /* Height of the footer */
   background:#6cf;
}
<div id="container">
   <div id="header"></div>
   <div id="body"></div>
   <div id="footer"></div>
</div>

于 2013-02-25T15:08:07.140 に答える