FAREX BLOG

Just another WordPress site

15 12月

footer を最下部へ

Posted in stylesheet, ホームページ作成 on 15.12.10

A CSS Sticky Footer を参考に footer を修正しました。

 

HTML

<body>
<div id="id_wrapper_main">
  <div id="id_header">
  </div>
  <div id="id_main">
  </div>
  <div class="push"></div>
</div>
<div id="id_footer" class="push">
</div>
</body>

 

CSS

* {
  margin : 0;
}

html, body {
  height : 100%;
}

.push {
  height : 30px;
}

#id_wrapper_main {
  min-height : 100%;
  height     : auto !important;
  height     : 100%;
  margin     : 0 auto -30px;
}

#id_footer {
}

tags: ,

footer を最下部へ はコメントを受け付けていません。

14 12月

footer を最下部へ

Posted in stylesheet, ホームページ作成 on 14.12.10

footer 最下部を指定する CSS

position : absolute;
bottom   : 0;

 

#id_footer {
  padding     : 10px;
  font-family : sans-serif;
  font-size   : 12px;
  position    : absolute;
  bottom      : 0;
  right       : 0;
}

 

ページがスクロールする場合は、イマイチ。

tags:

footer を最下部へ はコメントを受け付けていません。

11 12月

header main footer

Posted in ホームページ作成 on 11.12.10

body 内を　header, main, footer に分割しました。

<body><div id="id_wrapper_main">

<div id="id_header">
</div>
<div id="id_main">
FAREX
</div>
<div id="id_footer">
</div>

</div></body>

tags: , ,

header main footer はコメントを受け付けていません。