分からないこと

Webページをコーディングし、デベロッパーツールで構造等を確認していたところ
途中まで（ここではTOPの画像まで）しかBODY内含まれていません。

このままでも見た目は一見できているように見えるのですが何か気持ち悪さが残ります。
どうすれば今のレイアウトを変えずに全てをBODY内に入れることができますか？

コードは当然BODY内に入れています。

html
1<!DOCTYPE HTML>
2<html lang="ja">
3<head>
4<meta charset="utf-8">
5<meta http-equiv="X-UA-Compatible" content="IE=edge">
6<meta name="viewport" content="width=device-width, initial-scale=1.0">
7<title>Page</title>
8<link href="https://use.fontawesome.com/releases/v5.6.1/css/all.css" rel="stylesheet">
9<link rel="stylesheet" href="./css/style.css">
10</head>
11<body>
12    
13    <div class="main">
14        <div class="menu">
15            <a href=""><img src="./img/logo.png" alt=""></a>
16            <ul>
17                <li><a href="">About</a></li>
18                <li><a href="">Services</a></li>
19                <li><a href="">Careers</a></li>
20                <li><a href="">Contact</a></li>
21            </ul>
22        </div>
23        <div class="banner-text">
24            <h1>Now<br class="pc">Inveting...</h1>
25            <p>
26                インフキュリオンデジタルは、最新のテクノロジーを駆使して<br class="pc">
27                自ら事業やプロダクトを生み出すスタートアップスタジオです。         
28            </p>
29        </div>
30    </div>
31
32    <div class="contents">
33        <div class="service">
34            <h2>Services.</h2>
35            <p>
36                金融とテクノロジーの融合がもたらす可能性を追究し新しい事業やプロダクトを生み出していく。 インフキュリオンデジタルは、最先端のFintech企業としてこれまで培ってきたノウハウを元に決済に関わるプロダクトの開発を行っています。
37            </p>
38            <div class="more-button">
39                <a href="">→</a>
40            </div>
41        </div>
42
43        <div class="rec">
44            <img src="./img/ph1.jpg" alt="image1">
45        </div>
46    </div>
47
48    <div class="footer">
49        <div class="footer-menu">
50            <a href=""><img src="./img/logo.png" alt=""></a>
51            <ul>
52                <li><a href="">About</a></li>
53                <li><a href="">Services</a></li>
54                <li><a href="">Careers</a></li>
55                <li><a href="">Contact</a></li>
56            </ul>
57        </div>
58        <div class="footer-credit">
59            <p>Copyright© 2019 Sample Example All rights reserved.</p>
60        </div>
61    </div>
62
63    <div id="stalker"></div>
64    <script>
65        const stalker = document.getElementById('stalker'); 
66        document.addEventListener('mousemove', function (e) {
67            stalker.style.transform = 'translate(' + e.clientX + 'px, ' + e.clientY + 'px)';
68        });
69    </script>
70
71</body>
72</html>

css
1/* font-family: 'Josefin Sans', sans-serif; */
2@import url('https://fonts.googleapis.com/css?family=Josefin+Sans&display=swap');
3
4* {
5    margin: 0;
6    padding: 0;
7    box-sizing: border-box;
8}
9
10/* js */
11#stalker {
12    pointer-events: none;
13    position: fixed;
14    top: -8px;
15    left: -8px;
16    width: 30px;
17    height: 30px;
18    background: rgba(255,255,255,.1);
19    border-radius: 50%;
20    transform: translate(0,0);
21    transition: transform 0.2s;
22    transition-timing-function: ease-out;
23    z-index: 999;
24}
25/* js */
26
27body {
28    font-family: sans-serif;
29    width: 100%;
30    height: 100vh;
31    overflow-x: hidden;
32}
33.main {
34    width: 130%;
35    height: 100%;
36    background-image: linear-gradient(rgba(0,0,0,1.0),rgba(0,0,0,.5)),url(../img/main.jpg);
37    background-size: cover;
38    animation: moveBg 20s infinite linear;
39}
40@keyframes moveBg{
41    0%    { background-position: -300px 0px; }
42    100%  { background-position: 0 0; }
43}
44.menu {
45    width: 100%;
46}
47.menu img {
48    width: 70px;
49    cursor: pointer;
50    top: 50px;
51    left: 70px;
52    position: fixed;
53}
54.menu ul {
55    display: inline-flex;
56    list-style: none;
57    top: 40px;
58    right: 70px;
59    position: fixed;
60}
61.menu ul li {
62    margin: 0 0 0 40px;
63    cursor: pointer;
64}
65.menu ul li a {
66    font-size: 12px;
67    color: #fff;
68    text-decoration: none;
69    letter-spacing: 2px;
70}
71.menu ul li a:hover {
72    padding: 0 0 5px 0;
73    border-bottom: 1px solid #fff;
74    opacity: .5;
75}
76.banner-text {
77    width: 80%;
78    color: #fff;
79    top: 20vw;
80    left: 20vh;
81    position: relative;
82}
83.banner-text h1 {
84    font-size: 75px;
85    font-weight: bold;
86    font-family: 'Josefin Sans', sans-serif;
87    text-shadow:2px 2px 2px #000;
88    line-height: 80px;
89    opacity: .5;
90}
91.banner-text p {
92    font-size: 15px;
93    font-weight: bold;
94    text-shadow:2px 2px 2px #000;
95    letter-spacing: 1px;
96    margin: 30px 0 50px;
97    line-height: 30px;
98    opacity: .7;
99}
100.contents {
101    width: 60%;
102    margin: 150px auto;
103    background: #fff;
104}
105.contents .service {
106    display: flex;
107    justify-content: space-between;
108}
109.contents .service h2 {
110    font-size: 20px;
111    width: 20%;
112}
113.contents .service p {
114    font-size: 15px;
115    line-height: 30px;
116    width: 60%;
117    letter-spacing: 1px;
118}
119.contents .news p {
120    font-size: 15px;
121    line-height: 30px;
122    width: 60%;
123    letter-spacing: 1px;
124}
125.contents .service .more-button a {
126    color: #000;
127    text-decoration: none;
128    padding: 10px;
129    border: 1px solid #000;
130    border-radius: 50%; 
131    top: 110px;
132    position: relative;
133    transition: .5s;
134}
135.contents .service .more-button a:hover {
136    color: #fff;
137    background: #dc143c;
138}
139.contents .rec {
140    margin: 100px auto;
141}
142.contents .rec img {
143    width: 100%;
144}
145.footer {
146    width: 100%;
147    height: auto;
148    color: #fff;
149    padding: 50px 50px 100px 50px;
150    background: #000;
151}
152.footer .footer-menu {
153    display: flex;
154    justify-content: center;
155    opacity: .7;
156}
157.footer .footer-menu img {
158    width: 70px;
159    cursor: pointer;
160}
161.footer .footer-menu ul {
162    display: inline-flex;
163    list-style: none;
164}
165.footer .footer-menu ul li {
166    margin: 0 0 0 40px;
167    cursor: pointer;
168}
169.footer .footer-menu ul li a {
170    font-size: 12px;
171    color: #fff;
172    text-decoration: none;
173    letter-spacing: 2px;
174}
175.footer .footer-menu ul li a:hover {
176    padding: 0 0 5px 0;
177    border-bottom: 1px solid #fff;
178    opacity: .5;
179}
180.footer .footer-credit {
181    margin: 20px 0 0 0;
182    padding: 20px 0 0 0;
183    border-top: 1px solid #696969;
184}
185.footer .footer-credit p {
186    font-size: 10px;
187    text-align: center;
188    opacity: .7;
189}

m.ts10806

2019/10/22 11:37

>途中まで（ここではTOPの画像まで）しかBODY内含まれていません。提示の画像ではその様子がわかりませんでしたが、どこのことを言っていますか？

thyda.eiqau

2019/10/22 11:55

m.ts10806さん、インスペクターで<body>にカーソルを合わせたときにハイライトされるのが画像のところだけ、という意味ではないでしょうか。

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

回答1件

ベストアンサー

一度、bodyのheight指定を解除してみてはいかがでしょうか？

CSS
1body {
2    font-family: sans-serif;
3    width: 100%;
4    /* height: 100vh; */
5    overflow-x: hidden;
6}

.mainのほうのheightを100vhにしてあげれば、bodyのほうのheightは要らない気がします。

投稿2019/10/22 12:02

AsukaKobayashi

総合スコア296

DaisukeMori

2019/10/22 12:48

ご回答ありがとうございます。その通りでした。無事解決しました。ありがとうございました。

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

あなたの回答

tips

プレビュー

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

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

15分調べてもわからないことは
teratailで質問しよう！

ただいまの回答率
85.36%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

『🎄teratailクリスマスプレゼントキャンペーン2024🎄』開催中！

＼teratail特別グッズやAmazonギフトカード最大2,000円分が当たる！／

[HTML CSS] TOPの部分しかBODY内に含まれない

分からないこと

関連した質問