ファーストビューをレスポンシブで制御したいです

こちらの組んだページの修正をしてまして、つまずいています。

メインビジュアルだけではなく、header,main,footer1ページ全ての要素を画面にぴったりと表示させたいのですが、高さが変わると、中身のコンテンツのスタイルが変わり、画面の高さによって、表示させたいスタイルにできません。メインビジュアルだけなら１００vhでできるのですが、、、、、
ファーストビュー要素全てとなると難しいです、、、、
何か良い方法はありますでしょうか？教えて欲しいです。

デザインカンプの資料と、コードを添付します。よろしくお願いいたします。

HTML
1<!DOCTYPE html>
2<html lang="ja">
3
4<head>
5  <meta charset="UTF-8">
6  <meta name="description" content="日本初の半導体・LED・電子部品用封止金型ファブレスメーカー、株式会社CAPABLEの公式サイトです。">
7  <meta name="keywords" content="CAPABLE,ケイパブル,半導体,LED,電子部品,封止金型,ファブレスメーカー,金型設計,金型製造,超精密押出成形金型,トランスファーモールド">
8  <meta name="viewport" content="width=device-width, initial-scale=1.0">
9  <link rel="stylesheet" href="css/reset.css">
10  <link rel="stylesheet" href="css/style.css">
11  <title>CAMPUS</title>
12</head>
13
14<body>
15  <!-- ヘッダー -->
16  <header>
17    <div class="header-inner">
18      <a href="http://capableeng.com/"><img class="logo" src="images/CAMPUS images/logo.png" alt="CAPABLEロゴ画像"></a>
19    </div>
20  </header>
21  <!-- アイキャッチ画像 -->
22  <div class="eye-cath">
23    <h1><img src="images/eye-cath-txt.png" alt="手を繋ぐ人たちの画像"></h1>
24    <div class="border"><img src="images/CAMPUS images/border.png" alt="ボーダー画像"></div>
25  </div>
26  <!-- メイン -->
27  <main>
28    <div class="container">
29      <div class="main-wrapper">
30        <p>国内外のお客様と日本の金型・金属加工工場を結ぶ金型受発注プラットフォームCAMPUS さまざまな課題の解決をサポートし、日本の金型産業を活性化いたします。</p>
31        <!-- 下層バナー -->
32        <div class="banners">
33          <div class="banner1">
34            <a href="partner.html">
35              <h3>稼働状況に応じて<br> 得意分野の仕事を受注したい</h3>
36              <h2>金型・金属加工工場の方</h2>
37              <p>詳しくはこちら</p>
38            </a>
39          </div>
40          <div class="banner2">
41            <a href="tel:0756348405">
42            <h3>高精度・適正価格で<br> 金型・金属加工品を発注したい</h3>
43            <h2>企業の方</h2>
44            <p><span>075-634-8405</span>までお問い合わせください</p>
45          </a>
46          </div>
47
48        </div>
49      </div>
50    </div>
51  </main>
52
53  <footer>
54    <div class="copyright">
55      <small>Copyright © CAPABLE Ltd. All Rights Reserved.</small>
56    </div>
57  </footer>
58</body>
59
60</html>

css
1@charset "utf-8";
2
3*, *::before, *::after {
4box-sizing: border-box;
5}
6
7/* 共通パーツ */
8body {
9  font-style: normal;
10  font-family: Noto Sans JP, Arial, sans-serif;
11  font-weight: bold;
12}
13a {
14  text-decoration: none;
15  color: #000;
16}
17.container {
18  max-width: 1340px;
19  margin: 0 auto;
20  text-align: center;
21}
22
23/* index.htmlスタイル */
24
25/* ヘッダー */
26header {
27  box-shadow: 0px 3px 6px #00000029;
28}
29.header-inner {
30  max-width: 1340px;
31  margin: 0 auto;
32}
33.header-inner img {
34  display: flex;
35  align-items: center;
36  padding:10px 0 10px 0 ;
37}
38
39/* アイキャッチ画像 */
40.eye-cath {
41  height: 100vh;
42  background-image: url(../images/CAMPUS\ images/main.jpg);
43  background-position: center;
44  background-size: cover;
45  background-repeat: no-repeat;
46  position: relative;
47}
48.eye-cath .border {
49  position: absolute;
50  top: 42%;
51  left: 50%;
52  transform: translate(-50%, -50%);
53  width: 38%;
54}
55.eye-cath::before {
56  content: '';
57  display: block;
58  height: 100%;
59  width: 100%;
60  position: absolute;
61  left: 0;
62  top: 0;
63  background: rgb(0 73 97 / 60%);
64}
65.eye-cath h1 {
66  z-index: 2;
67  position: absolute;
68  top: 50%;
69  left: 50%;
70  transform: translate(-50%, -50%);
71  -webkit-transform: translate(-50%, -50%);
72  -ms-transform: translate(-50%, -50%);
73
74}
75.eye-cath img {
76  width: 100%;
77  height: auto;
78}
79
80/* メイン */
81main {
82  padding-bottom: 90px;
83}
84.main-wrapper {
85  margin: 0 auto;
86}
87main .container p {
88text-align: center;
89font: normal normal bold 26px/50px Noto Sans JP;
90letter-spacing: 1.04px;
91color: #333333;
92opacity: 1;
93margin: 0 auto;
94margin-top: 45px;
95}
96
97.banners {
98  display: flex;
99  justify-content: center;
100  margin-top: 45px;
101}
102.banner1 {
103  width: 42%;
104  background-color: rgba(	0,145,123,0.1);
105  color: #000;
106  box-shadow: 0px 3px 6px #00000029;
107border-radius: 10px;
108transition: .3s;
109}
110.banner1 h3 {
111  color: #333333;
112  font-size: 26px;
113  padding: 20px;
114  line-height: 1.7;
115}
116.banner1 h2 {
117  color: #007891;
118  font-size: 41px;
119  border-bottom: 1px solid #007891;
120    width: 83%;
121    margin: 0 auto;
122    padding-bottom: 16px;
123}
124main .banner1 p {
125  color: #333333;
126  font-size: 24px;
127  width: 81%;
128  background-color: #fff;
129  margin-top: 18px;
130  border-radius: 10px;
131}
132
133.banner1:hover {
134  background-color: #00000029;
135}
136
137.banner2 {
138  width: 42%;
139  background-color: rgba(	0,78,145, 0.1);
140  color: #000;
141  box-shadow: 0px 3px 6px #00000029;
142}
143.banner2 h3 {
144  color: #333333;
145  font-size: 26px;
146  padding: 20px;
147  line-height: 1.7;
148}
149.banner2 h2 {
150  color: #005F91;
151  font-size: 41px;
152  border-bottom: 1px solid #005F91;
153    width: 83%;
154    margin: 0 auto;
155    padding-bottom: 16px;
156}
157main .banner2 p {
158  color: #333333;
159  font-size: 18px;
160  margin-top: 18px;
161}
162.banner2 p span {
163  font-weight: bold;
164  font-size: 35px;
165}
166
167.banners div:nth-last-of-type(2) {
168  margin-right: 35px;
169}
170/* フッター */
171footer .copyright {
172  text-align: center;
173  background-color: #333333;
174  height: 50px;
175}
176footer small {
177  color: #fff;
178  line-height: 50px;
179  font-size: 14px;
180}
181/* メデイアクエリ */
182@media (max-width: 768px) {
183  .container {
184    padding: 0 20px;
185  }
186  .header-inner .logo{
187    margin: 0 auto;
188    height: 45px;
189  }
190  .eye-cath h1 {
191    top: 40%;
192    width: 100%;
193  }
194  .eye-cath img {
195    padding: 0 10px;
196    margin: 0 auto;
197  }
198  .eye-cath .border {
199    width: 78%;
200    top: 34%;
201}
202
203  main .main-wrapper > p {
204    text-align-last: left;
205    font-size: 21px;
206  }
207  .banners {
208    flex-direction: column;
209  }
210  main .main-wrapper .banners > p {
211    text-align: center;
212  }
213  .banner1 {
214    width: 100%;
215  }
216  .banner1 h3,
217  .banner2 h3 {
218    font-size: 21px;
219  }
220  .banner1 h2,
221  .banner2 h2 {
222    font-size: 25px;
223  }
224  main .banner1  p {
225    margin-bottom: 10px;
226  }
227  .banner1:hover {
228    background-color: rgba(	0,145,123,0.1);
229
230  }
231  .banner2 {
232    width: 100%;
233    margin-top: 60px;
234  }
235
236}

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

回答1件

ベストアンサー

とんでも論でいくとheader10%,footer10%残りのメイン80%でうまくいくと思われます

ただこれだと携帯とpcナンジャコリャーってレベルで変わる(と思われる)ので、
cssにはcalcという計算してくれる子がいます
headerやfooterを合わせて300pxとすると
メインはcalc(100% - 300px)と指定すると動作してくれます
すごい発明ですね
メインとアイキャッチを含めてメインで表してますので希望のHTMLとは少々違いますがこんなのあるよというご紹介程度でお受け取りください

投稿2020/11/11 10:42