footerを最下部に配置した時のコンテンツの高さについて

ここにより詳細な情報を記載してください。

前提・実現したいこと

コンテンツ量が少なくてもfooterを最下部に配置したくて、ネットのソースを参考に作成しました。しかし、現状はコンテンツの量が少なければ背景色の部分が多くなり見栄えが良くありません。
実現したいことは、コンテンツの量に関係なくコンテンツの領域(高さ)がfooterとのmargin-bottom : 1em;に保てるようしたです。（コンテンツにの量が少なければ余白としてfooterとの間がmargin-bottom : 1em;に伸びてほしいです。）
理由があり、bodyとコンテンツは色分けが必要でコンテンツの幅は900pxにしたいです。よろしくお願いいたします。

発生している問題・エラーメッセージ

コンテンツの領域(高さ)がfooterとのマージン1emにならずに文字の高さ分しか表示しません。

該当のソースコード

HTML
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4<meta charset="UTF-8">
5<title></title>
6<style>
7<!--
8.wrapper{
9    min-height: 100vh;
10    position: relative;
11    padding-bottom: 120px;
12    box-sizing: border-box;
13}
14
15.header{
16  width: 100%;
17  height : 6em;
18  background-color : silver;
19  text-align : center;
20}
21
22.cont{
23  width : 900px;
24  height : 100%;
25  background-color : white;
26  margin-top : 1em;
27  margin-bottom : 1em;
28  margin-left : auto;
29  margin-right : auto;
30}
31
32
33.footer{
34    width: 100%;
35    background-color : #073276;
36    text-align: center;
37    padding: 30px 0;
38    position: absolute;
39    bottom: 0; 
40}
41-->
42</style>
43
44</head>
45
46<body bgcolor="#f3e7e7">
47<div class="wrapper">
48
49     <div class="container">
50         <div class="header">header</div>
51         <div class="cont">cont</div>
52    </div>
53
54<div class="footer">
55     <p>footer</p>
56</div>
57
58</div>
59</body>
60</html>

試したこと

.contの高さを height : 100%;　にしました。

補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

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

回答1件

ベストアンサー

.cont{
  width : 900px;
  /*height : 100%;*/
  background-color : white;
  margin-top : 1em;
  margin-bottom : 1em;
  margin-left : auto;
  margin-right : auto;

    /* 追記した部分 */
    border: 1px solid #f00;
    min-height: calc(100vh - 56px);
    margin-bottom: 1em;
}

.contを↑にしたらどうかな？

投稿2019/07/12 08:46