運用型広告
Google・Yahoo!のリスティング広告はもちろん、Facebook・Instagram・LINE・XなどのSNS広告も運用が可能です。
Web制作
【CSS】コンテンツが少ない時も！フッターを最下部に表示する方法！
Not foundページや、お知らせ一覧ページなどのコーディング中に
コンテンツ量が少なくて
フッターが画面の最下部に来ない‥‥
なんて経験はありませんか？
コンテンツ量が少ない
↓
ブラウザ全体の高さに対して、コンテンツの高さが足りてない
という状態のため、フッターの下に余白ができてしまいます。
できれば他のページと同じ表示にしたいですよね。
今回は解決法を2つご紹介します！
解決法① position:fixed;
フッターをfixedで画面最下部に固定してしまう方法です。
<footer>
<p>フッターフッターフッター</p>
</footer>footer{
position: fixed;
}ただ、トップページなどのコンテンツ量が多いページでも
最下部に常に表示されてしまいます。
コンテンツ量が多い時はスクロールで表示したい！時は
次の解決法を試してみましょう。
解決法② display:flex;
横並びで使用することが多いflexboxですが
flex-direction:corumn;との組み合わせると
CSS4行でfooterを固定する事が出来ます！
<body>
<header>
<h1>タイトルタイトルタイトル</h1>
</header>
<main>
<p>テキストテキストテキストテキスト</p>
</main>
<footer>
<p>フッター</p>
</footer>
</body>body {
display: flex;
flex-flow: column;
min-height: 100vh;
}
main {
flex: 1;
}・flex-flow: column;
横並びで使用するflexboxですが
columnと併用で縦並びに
・min-height: 100vh;
bodyの最小の高さ＝画面の高さに
・flex: 1;
mainの最小の高さ＝画面の高さｰ他の同レイヤーの要素の高さに
まとめ
サイト内の見た目の統一はとても重要です。
用途にあったCSSを使いこなしましょう！
Request Materials資料請求
Webマーケティングにおけるパフォーマンス改善のための資料がダウンロードできます。
- ● web広告の改善事例が知りたい方
- ● 現在お願いしている代理店との比較をしたい方
- ● サービスの全体像・料金を知りたい方