HTML CSSヘッダーを固定する際に文字量がおおくなった場合、背景が自動的にのびるようにしたい

タイトルにも書いたのですが、ヘッダーを固定する際に文字量がおおくなった場合、
背景が自動的にのびるようにしたいのですが、なかなかうまくできません。
何らかの解決策を知っている方がいましたらご教示お願いします。

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

回答1件

ベストアンサー

min-heightで数値を指定し、heightをautoにすることで自動的に高さを増やすことが出来ます。
とすれば出来ます。
以下html/cssサンプルコードです。
HTML

lang
1<header>
2</header>
3<div class="contents">
4<div class="box1">
5<h2>サンプル1</h2>
6<p>
7これはサンプルテキストです。これはサンプルテキストです。これはサンプルテキストです。これはサンプルテキストです。これはサンプルテキストです。これはサンプルテキストです。これはサンプルテキストです。これはサンプルテキストです。これはサンプルテキストです。これはサンプルテキストです。これはサンプルテキストです。これはサンプルテキストです。
8</p>
9</div>
10<div class="box2">
11<h2>サンプル2</h2>
12<p>
13これはサンプルテキストです。これはサンプルテキストです。これはサンプルテキストです。これはサンプルテキストです。これはサンプルテキストです。これはサンプルテキストです。これはサンプルテキストです。これはサンプルテキストです。これはサンプルテキストです。これはサンプルテキストです。これはサンプルテキストです。これはサンプルテキストです。
14</p>
15</div>
16</div>
17<footer>
18</footer>

CSS

lang
1body, html {
2height: 100%;
3background-color: white;
4}
5
6h1, h2, h3, h4, h5, h6, p, body {
7font-size: 18px;
8color: #4a4a4a;
9font-family: sans-serif;
10margin: 0;
11padding: 0;
12}
13
14header {
15height: 80px;
16width: 100%;
17background-color: #ccc;
18position: fixed;
19}
20.contents {
21height: 700px;
22width: 960px;
23background: #cce;
24margin: 0 auto;
25padding: 60px 0 0 0; 
26}
27
28footer {
29margin: 0 auto;
30height: 80px;
31width: 100%;
32background-color: #ccc;
33position:absolute;
34
35}
36.box1 {
37min-height: 300px;
38height: auto; 
39width: 100%;
40background-color: green;
41}
42.box1 p {
43font-size: 18px;
44color: #fff;
45line-height: 26px;
46padding-left: 150px;
47padding-right: 150px;
48}
49.box1 h2 {
50font-size: 34px;
51color: #4a4a4a;
52padding-top: 15px;
53padding-bottom: 30px;
54text-align: center;
55}
56.box2 {
57height: 300px; 
58width: 100%;
59background-color: blue;
60}
61.box2 p {
62font-size: 18px;
63color: #fff;
64line-height: 26px;
65padding-left: 150px;
66padding-right: 150px;
67}
68.box2 h2 {
69font-size: 34px;
70color: #4a4a4a;
71padding-top: 15px;
72padding-bottom: 30px;
73text-align: center;
74}
75