どんなにページをスクロールしても、ヘッダーとフッターはスクリーン内に収めたいって時ありますよね。

Steps:

  • 以下のようなHTMLファイルを作って下さい。headerfooter用いずにdivとかでもいいはず。
<html>
    <head></head>
    <body>
        <header></header>
        <main></main>
        <footer></footer>
    </body>
</html>
  • ヘッダーとフッターの高さを決めて下さい。ヘッダーの高さを headerH、フッターの高さを footerHとします。

  • 以下のようなCSSファイルを作って下さい。

/* remove margin */
html,
body {
    width: 100%;
    height: 100%;
    margin: 0;
}

/* main part */
header{
    position: fixed;
    top: 0;
    width: 100%;
    height: headerH;
}

main{
    top: headrH;
    width: 100%;
    position: fixed;
    overflow: auto;
    bottom: footerH;
}

footer{
    position: fixed;
    bottom: 0;
    width: 100%;
    height: footerH;
}

これだけです。CSSは最低限しか書いてませんので、ご自身で色々いじって下さい。
サンプルコード

Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account log in.