css 要素が少なくてもfooterを一番下に置く方法

現在のページで要素が少ない時にフッターが上の方まできてしまい、フッターから下の余白が目立ってしまっています。
なので、要素が少ない時と多い時のどちらにも対応できる何かいいcssの掛け方など教えていただけたら助かります！

height:８０vh;やwebkit-fill-availableなど試したのですが、今度は要素が多くなってきた時にフッターが要素と少し被ってしまうようになってしまいました。
直接要素自体のheightを指定すれば回避できたのですが、今度は指定したheightよりも要素が大きくなる場合が出てくるのでうまくいきませんでした。他に何かいい方法ありますでしょうか？

ページの全体像が膨大な量になってしまったのでざっとですがviewとcssです

<html>
<body>

<div id="wrap">

<header></header>

<div id="contents">
　     <div class="main">
       </div>
</div>

<footer class="footer">
</footer>
</div>
</body></html>

css

body{
    overflow: hideen;
    margin: 0;
}
.footer {
    /*position: fixed;*/
    bottom: 0;
    width: 100%;
    height: 70px;
}
#wrap {
    width: 1100px;
    margin: 0px auto;
}
#contents_admin {
    margin: 10px 0px 10px 0px;
}

以上です宜しくお願いします。

行動規範の内容に同意します

回答3件

ベストアンサー

以下のページに、参考になる方法が記載されておりました。

フッタの表示をコンテンツ量が少ない時は最下部に固定、多い時は成り行きにするシンプルなテクニック

Absoluteなどの技を駆使して、少ないときは常に最下部、多いときはページ最下部に表示する方法になります。

投稿2018/05/15 08:22

退会済みユーザー

総合スコア0

takeke

2018/05/15 09:13

回答ありがとうございます！とても参考になりました！こちらのテクニックでやりたいことができました！position: fix;まではやっていたんですがabsoluteは考えてもいませんでした、他のページでも問題なく作用していたので助かりました！また機会がありましたが宜しくお願いしますm(._.)m

行動規範の内容に同意します

CSSには、Sticky Footerという素晴らしいテクニックがあります。以下のようにFlexboxを使えば、ヘッダー・コンテンツ・フッターの高さが可変でも対応できます。

html
1<html>
2<body>
3
4<header class="header">
5  <div class="wrap">header</div>
6</header>
7<div class="content">
8  <div class="wrap">content</div>
9</div>
10<footer class="footer">
11  <div class="wrap">footer</div>
12</footer>
13
14</body>
15</html>

css
1* {
2  margin: 0;
3  padding: 0;
4  box-sizing: border-box;
5}
6html {
7  height: 100%;
8}
9body {
10  display: flex;
11  flex-direction: column;
12  height: 100vh;
13}
14.content {
15  flex: 1 0 auto;
16}
17.footer {
18  flex-shrink: 0;
19}
20.wrap {
21  margin: auto;
22  width: 1100px;
23}