早めに答えが知りたいので、再度ご質問させていただきます。

念のために全文を記載しております。
見づらいコードで申し訳ありませんが、アドバイスをいただければと思っております。
画像を見ていただければ、ご理解いただけるかと思いますが、
赤太字で　いつも完璧な贈りもの　と書いている上のdiv class="space-full"で囲んだところが、
実際の失敗画像では、赤枠の部分が狭くなっています。

理想のイメージ画像のように　

img要素

img要素

divで囲んだ要素を綺麗に囲いたいのですが、うまくいきません。

div class="space-full"に高さを加えようとして、height:500px;などとしましたが、
これでは無理やり高さを調整している気がして、別の方法を探しています。
自動的に調整できるようなコマンドがあれば、それを使いたいのですが、
height:auto;と試しましたが、何も起こりませんでした。

この理由も分からないので、どなたか教えていただきたいと思っております。
（デベロッパーツールの中身も確認しましたが、複雑で分かりませんでした。）

※補足ですが、JavaScript文が入っていますが、これはBootstrapというツールを利用しているからです。
【理想の全体のイメージURL】
https://www.airbnb.jp/gift
※HTML・CSS練習のためこのサイトを模写しております。

【理想のイメージ画像】

【実現したいイメージ画像】

【実際の失敗画像】

<!DOCTYPE html>
 <html lang="ja">
  <head>
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <meta charset="UTF-8">
     <title>現地の人から借りる家、体験＆スポット-Airbnb</title>
     <link rel="stylesheet" href="css/style.css" type="text/css">
     <link rel="icon" href="image/image1.png">
  　 <!-- <link href="../Sublime3/css/bootstrap.min.css" rel="stylesheet" type="text/css"> -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
    <div class="mokuji">
       <img src="image/image1.png" width="60px" height="48px" alt="目次">
    </div>
   <div class="search-bigbox">
     <div class="search-box">
        <input id="text-searchbox" type="text" name="search" value="探す" size="40px" >
   
          <div class="search">
          <img src="image/image2.png" width="18px" height="18px" alt="探す">
          </div>
     </div>
   </div>

     <div class="boxbutton">
     <button type="button" name="ホスト" class="host1">
      <p>ホストをはじめる</p>
     </button>
     <button type="button" name="ヘルプ" class="help2">
       <p>ヘルプ</p>
     </button>
     <button type="button" name="登録" class="regist3">
      <p>登録する</p>
     </button>
     <button type="button"name="ログイン"  class="login4">
      <p>ログイン</p>
      </button>
    </div>
    <!--画像挿入-->
    <div class="trip">
     <img src="image/image4.jpg" width="1920px" height="680px" alt="旅行">
      <div class="tripgift">
      <p id="tp"><strong>旅を贈ろう。</strong></p>
      Airbnbギフトカードで、世界を身近に<br><br>
      <input id="submit_button" type="submit" value="ギフトカード登録">
      </div>
     </div>
     <br><br>
 <div class="space-full">   
　<div class="space-top3">
     <h2>いつも完璧な贈りもの</h2>
    <div class="space-top3-2">
　　  <div class="mail">
      　<img src="image/image5.png" width="50px" height="50px" alt="メール">
  　 　 <h3>簡単に使える</h3>
      　<p>ギフトカードはメールで届きます。Airbnbア<br>カウントへのギフト登録も超かんたん。</p>
      </div>
      <div class="watch">
         <img src="image/image6.png" width="50px" height="50px" alt="時計">
  　  　 <h3>有効期間なし</h3>
         <p>Airbnbギフトカードは無期限。だから友達も時間をかけて旅をプランできます。</p>
      </div>
      <div class="earth">
         <img src="image/image7.png" width="50px" height="50px" alt="地球儀">
         <h3>忘れられない旅</h3>
         <p>お家は100万件以上あるので、ずっと住みたいと憧れていた街の暮らしも叶います。</p>
      </div>
      </div>
     </div>
    </div> 
      <div class="page-container-full">
      <br><br>
      <img src="image/image8.png" width="100px" height="100px" alt="プレゼント">
      <h2>ギフトカードをもらったら...</h2>
      <p>ログインあるいは利用登録してギフトを登録するだけです。あとは使い途をゆっくり考えましょう。</p>
      </div>
　    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
    <script src="../Sublime3/js/bootstrap.min.js"></script>
  </body>

 </html>

.mokuji{
position:absolute;
top:20px;
left:10px;
}


.search{
position:absolute;
top:15px;
left:10px;
}

.search-bigbox{
position:relative;
top:-15px;
left: 80px;
width:350px;
height:48px;
background-color:rgba(0,0,0,0);
box-shadow: rgba(0,0,0,0.1) 0px 2px 4px;
border-width:1px;
border-style: solid;
border-color: rgb(235,235,235);
border-image: initial;
border-radius: 4px;
}

input#text-searchbox{
position:absolute;
top:15px;
left:45px;
font-size:16px;
font-weight:bold;
color:gray;
background-color:transparent;
border:0px;

}



.boxbutton{
position:relative;
display:flex;
justify-content:flex-end;
top:-90px;

}


.host1{
position: relative;
display:inline-block;
width:150px;
height:50px;
font-size:14px;
font-weight:bold;
background-color:transparent;
border:0px;
}

.host1:hover{
border-top:0;
border-bottom:2px solid;
border-left:0;
border-right:0;
border-bottom-color:gray;
}

.help2{
position: relative;
display:inline-block;
width:120px;
height:50px;
font-size:14px;
font-weight:bold;
background-color:transparent;
border:0px;
}

.help2:hover{
border-top:0;
border-bottom:2px solid;
border-left:0;
border-right:0;
border-bottom-color:gray;
}

.regist3{
position: relative;
display:inline-block;
width:120px;
height:50px;
font-size:14px;
font-weight:bold;
background-color:transparent;
border:0px;
}

.regist3:hover{
border-top:0;
border-bottom:2px solid;
border-left:0;
border-right:0;
border-bottom-color:gray;
}

.login4{
position: relative;
display:inline-block;
width:120px;
height:50px;
font-size:14px;
font-weight:bold;
background-color:transparent;
border:0px;
}

.login4:hover{
border-top:0;
border-bottom:2px solid;
border-left:0;
border-right:0;
border-bottom-color:gray;
}


.trip{
position:relative;
top:40px;
}

.tripgift{
position:absolute;
top:150px;
left:300px;
text-align:center;
color:white;
}

p#tp{
font-size:48px;
}

input#submit_button{
position: absolute;
font-family: Circular, -apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue", sans-serif;
width:200px;
height:50px;
left:0px;
font-weight:bold;
font-size:16px;
color:#484848;
text-align:center;
background-color:#fff;
}

.space-full{
position: relative;
width: auto;
}


.space-top3{
position: relative;
display:flex;
justify-content: center;
margin-left: auto;
margin-right: auto;
}


.space-top3 h2{
position: absolute;
font-size:32px;
font-weight:bold;
font-style:solid;
text-align:center;
}


.mail{
position:absolute;
display:inline-block;
box-sizing: border-box;
margin-left: auto;
margin-right: auto;
top: 100px;
left: 450px;
}

.mail h3{
position:absolute;
left:-20px;
}

.mail p{
position:absolute;
width: 350px;
top:100px;
left:-130px;
}

.watch{
position:absolute;
display:inline-block;
margin-left: auto;
margin-right: auto;
top: 100px;
left: 800px;
}

.watch h3{
position:absolute;
left:-20px;
}

.watch p{
position:absolute;
width: 330px;
top:100px;
left:-130px;
}

.earth{
position:absolute;
display:inline-block;
margin-left: auto;
margin-right: auto;
top: 100px;
left: 1200px;
}

.earth h3{
position:absolute;
width:330px;
left:-70px;
}

.earth p{
position:absolute;
width: 330px;
top:100px;
left:-150px;
}

.page-container-full{
position:relative;
background-color:#007a87;
top:300px;
width:auto;
height:400px;
display:flex;
justify-content:center;
}

{
position: absolute;
top: 50px;
}

.page-container-full img{
position: absolute;
top:10px;
}

.page-container-full h2{
position: absolute;
top:100px;
width:auto;
height:50px;
font-size:32px;
font-weight:bold;
color:#fff;
}

.page-container-full p{
position: absolute;
top:170px;
width: auto;
height: 20px;
font-size:20px;
color:#fff;
}

Lhankor_Mhy

2019/07/01 13:41

https://teratail.com/questions/197843 マルチポストは推奨されていません。 > また、teratail上で誤って同じ質問を複数投稿してしまった場合は、質問の削除リクエストを送ってください。 https://teratail.com/help#posted-otherservice

kentasuzuki_

2019/07/01 13:53

前の質問を削除いたしました。

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

回答3件

ベストアンサー

position:absoluteするとラップしているHTML要素は子要素の高さを引き継げません

追記

該当部分だけ

CSS
1<style>
2.space-full{
3  width: auto;
4}
5.space-top3{
6  background-Color:gray;
7}
8.space-top3 h2{
9  font-size:32px;
10  font-weight:bold;
11  font-style:solid;
12  text-align:center;
13}
14.space-top3-2{
15  background-Color:yellow;
16  justify-content: center;
17  display: -webkit-flex;
18  display: flex;
19}
20.mail,.watch,.earth{
21  text-align:center;
22  display:inline-block;
23}
24.mail{
25  background-Color:lime;
26}
27.watch{
28  background-Color:aqua;
29}
30.earth{
31  background-Color:fuchsia;
32}
33.mail h3,.watch h3,.earth h3{
34  text-align:center;
35}
36.mail p,.watch p,.earth p{
37  width: 330px;
38  text-align:left;
39}
40</style>
41<div class="space-full">   
42  <div class="space-top3">
43    <h2>いつも完璧な贈りもの</h2>
44    <div class="space-top3-2">
45      <div class="mail">
46        <img src="image/image5.png" width="50px" height="50px" alt="メール">
47        <h3>簡単に使える</h3>
48        <p>ギフトカードはメールで届きます。Airbnbアカウントへのギフト登録も超かんたん。</p>
49      </div>
50      <div class="watch">
51         <img src="image/image6.png" width="50px" height="50px" alt="時計">
52         <h3>有効期間なし</h3>
53         <p>Airbnbギフトカードは無期限。だから友達も時間をかけて旅をプランできます。</p>
54      </div>
55      <div class="earth">
56         <img src="image/image7.png" width="50px" height="50px" alt="地球儀">
57         <h3>忘れられない旅</h3>
58         <p>お家は100万件以上あるので、ずっと住みたいと憧れていた街の暮らしも叶います。</p>
59      </div>
60    </div>
61  </div>
62</div>

投稿2019/07/01 13:36

編集2019/07/02 03:10

yambejp

総合スコア118164

kentasuzuki_

2019/07/01 13:55

ありがとうございます。申し訳ございませんが、まだ分かっていないのですが、親要素でposition:relativeとしても、子要素はposition:absoluteと設定する必要はないということなのでしょうか？

kentasuzuki_

2019/07/01 13:55

またラップしているとはどういうことでしょうか？ネットで調べてみたのですが、折り返しという意味だそうなのですが、イマイチ理解できていないです。

yambejp

2019/07/02 03:11

ラップする＝囲んでいるフレックスBOXを利用しているのですから、absoluteは全部とってください該当部分のHTMLとCSSを追記しておきました（わかりやすいように色をつけてあります）

kentasuzuki_

2019/07/02 14:41

ありがとうございますご丁寧にしていただき、大変助かりました。

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

崩れる理由：
提示のコードで見ると、HTML上では「親子」の関係が記載されていますが、CSS上では、子要素全てがposition:absolute;されているので、**親要素の高さが「0（ゼロ）」**のため、親要素からハミ出してます。

-追記-
表現を一部、修正しました。

「yambejp」さんと、ほぼ同じで、該当箇所のみです。

CSS
1.space-full {
2  background-color: powderblue;  /* ← 分かりやすく色を付けています。 */
3}
4
5.space-top3 {
6  /* 設定削除 */
7}
8
9.space-top3-2 {
10  text-align: center;
11}
12
13.space-top3 h2 {
14  font-size:32px;
15  font-weight:bold;
16  font-style:solid;
17  text-align:center;
18}
19
20.mail,
21.watch,
22.earth {
23  box-sizing: border-box;
24  display: inline-block;
25  border: solid 1px #000;  /* ← 分かりやすく枠線を付けています。 */
26}
27
28.mail p,
29.watch p,
30.earth p {
31  width: 330px;
32  text-align: left;
33}

position関連は、全て削除してください。
HTMLに余分な空白が含まれているので、削除してください。
HTML、CSS共に「インデント」を揃えて作成されると良いかと思います。

※余分なコードがあったので修正しました。(^^;)

投稿2019/07/02 07:21

編集2019/07/02 14:18

yoshinavi

総合スコア3525

kentasuzuki_

2019/07/02 14:44

ご丁寧にありがとうございます。また、コードを綺麗にまとめる方法も教えていただき、ありがとうございます。

kentasuzuki_

2019/07/02 15:40

追加でご質問させていただきたいのですが、各セレクタにtext-align: center;とした際に、 display:flex; justify-content:center; と同じような効果があるのでしょうか？フレックスBOXについてまだ理解できていない部分が多いのですが、 text-align: center;を適用させて画面を縮めたり拡大しても各要素が伸び縮みしたので、別にフレックスBOXを使う必要はないのかなと思ってしまいました。

yoshinavi

2019/07/02 15:56

flexとは、似たような配置にはなりますが、動作させる部分が変わります。提示（および参考先）のコードでは「.mail,.watch,.earth」を、「inline-block」で横に並べていますが、flexを使うことで、もっと自由にモニター幅（デバイス幅）に柔軟に簡単に対応することが可能になりますので、今後を考えると、大変かもしれませんが、flexを覚えるとコーディングが楽になります。 ※今回の提示コードであれば、どちらでも、あまり変わりないかと思います。

yoshinavi

2019/07/02 16:28

inline-blockがダメな訳ではありませんが、簡単にレイアウトが出来るようにflexが誕生したので、レイアウトに関して（特にレスポンシブ対応）は、flexが使いやすい場面が多いかと思います。

kentasuzuki_

2019/07/03 03:58

ありがとうございます。納得いたしました。 flexboxのことも視野にいれつつ勉強していきたいと思います。

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

お求めの回答になるかわかりませんが、heightの指定はpx以外にもビューポート等で指定する方法もあります。以下のリストからお求めのもの探してはいかがでしょうか。
https://qiita.com/anchoor/items/f197296d6b4ae874e260

height: autoに関してですが、autoは親要素内の子要素の大きさで高さが決まります。この場合は<div class="space-full">内のh2 h3 pタグなどが子要素にあたります。

回答になっていれば幸いです。

投稿2019/07/01 13:57