Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
Help us understand the problem. What is going on with this article?

【CSS】フッター要素を表示領域に固定させる

はじめに

駆け出しエンジニアのyosukeです!
先日、私が所属するevoluの自社サービスとして「 小説執筆アプリ - Mono - 」をリリースしました!

サーバーサイド側は半月くらいで作り終え、デスクトップ表示の最低限のUIを作ったところでのリリース(デプロイ)でしたので、これからフロント側の改修作業しているところです!
苦手なCSSでのレイアウト整正で特にハマったところをメモります!

フッター要素を固定にしてどの画面サイズでも表示位置を維持させたい

スクリーンショット 2020-12-16 16.08.58.png

書き方

HTML
<div class="fixed_footer">
 <footer>
  #フッターコンテンツ
 </footer>
</div>

css
.fixed_footer {               /* writingsページの「保存ボタンありフッター」の固定 */
    position: fixed;            /* フッターの固定 */
    bottom: 0px;                /* 位置(下0px) */
    left: 0px;                  /* 位置(左0px) */
    width: 100%;                /* 横幅100% */
    height: 60px;              /* 縦幅60px */
}

これで、画面を縮小したりスクロールしてもフッターは常にこの位置に固定表示される様になります!

以上です!

Yosuke_Narumi
駆け出しエンジニアです! 現在はRailsで自社サービスのアプリの開発をしています! 先月末(2020/11)、入社1月で「小説執筆アプリ-Mono-」をリリースさせていただきました! https://www.mono-kaki.site/
evolu
「みんながわくわくする世界をつくる」ために日々技術の研鑽をしていきます
https://evolu.tokyo
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away