前提・実現したいこと

表題の通り、hight autoを設定していても、コンテンツ内に応じた大きさに変わらない（小さいまま）

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

height autoが機能しない。hight を指定しないと大きくならない。(逆に指定すると、SP時にmarginを利かせることができない)

試したこと

height autoの特徴の再確認
結果、考えたことは、intro-bg指定のbg-color #fffが邪魔しているのではないか、と推測していますが
bg-color #fffは指定した状態で行いたいため、困惑しています。
今、intro-bgもsection class introの中に記載していますが、別々に分ける必要があるのでしょうか？

該当のソースコード

HTML
1<!DOCTYPE html>
2<html lang="jp">
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>Engress</title>
8    <meta name="description" content="日本人へのTOEFL指導歴豊かな講師陣のコーチング型TOEFLスクール">
9    <link rel="stylesheet" href="/Top/css/destyle.css">
10    <link rel="stylesheet" href="/Top/css/style.css">
11</head>
12<body>
13    <div class="body-wrapper">
14    <section class="intro">
15                <div class="inner">
16                    <p class="intro-ttl">TOEFL学習でこんな悩みありませんか？</p><!-- /.intro-ttl -->
17                    <div class="intro-flex">
18                        <p class="result">勉強の習慣が <br> 身についていない</p><!-- /.result -->
19                        <p class="result">勉強しているはず <br> なのに点数が伸びない</p><!-- /.result -->
20                        <p class="result">正しい勉強方法が <br> わからない</p><!-- /.result -->
21                    </div><!-- /.intro-flex -->
22                    <div class="intro-bg">
23                        <p class="intro-bg-ttl">Engressは <br> <span> TOEFLに特化したスクール</span>です</p><!-- /.bg-ttl -->
24                        <p class="intro-bg-desc">完全オーダーメイドで、１人１人の悩みに合わせた最適な指導で <br> TOEFLの苦手分野を克服します。</p><!-- /.bg-desc -->
25                    </div><!-- /.intro-bg -->
26                
27                </div><!-- /.inner -->
28            </section><!-- /.intro -->
29        <script src="./js/jquery-3.6.0.min.js"></script>
30        <script src="./js/script.js"></script>
31    </div><!-- /.body-wrapper -->
32</body>
33</html>
34

css
1
2.intro {
3  background-color: #1B224C;
4  height: auto;
5  position: relative;
6}
7
8@media screen and (max-width: 599px) {
9  .intro {
10    height: auto;
11  }
12}
13
14.intro-ttl {
15  text-align: center;
16  font-size: 3.6rem;
17  font-weight: bold;
18  color: #fff;
19  padding: 36px 0px  65px;
20}
21
22@media screen and (max-width: 599px) {
23  .intro-ttl {
24    padding: 35px 0px;
25  }
26}
27
28.intro-flex {
29  display: -webkit-box;
30  display: -webkit-flex;
31  display: -ms-flexbox;
32  display: flex;
33  -webkit-box-pack: justify;
34  -webkit-justify-content: space-between;
35      -ms-flex-pack: justify;
36          justify-content: space-between;
37  -webkit-box-align: center;
38  -webkit-align-items: center;
39      -ms-flex-align: center;
40          align-items: center;
41}
42
43@media screen and (max-width: 599px) {
44  .intro-flex {
45    -webkit-box-orient: vertical;
46    -webkit-box-direction: normal;
47    -webkit-flex-direction: column;
48        -ms-flex-direction: column;
49            flex-direction: column;
50  }
51}
52
53.intro-flex .result {
54  display: inline-block;
55  color: #fff;
56  font-size: 1.8rem;
57  font-weight: bold;
58  padding-top: 65px auto 80px;
59}
60
61@media screen and (min-width: 600px) and (max-width: 1179px) {
62  .intro-flex .result {
63    font-size: 2.6rem;
64  }
65}
66
67@media screen and (max-width: 599px) {
68  .intro-flex .result {
69    padding: 20px;
70    white-space: nowrap;
71  }
72}
73
74@media screen and (max-width: 599px) {
75  .intro-flex .result > br {
76    display: none;
77  }
78}
79
80.intro-bg {
81  background-color: #fff;
82  width: calc(900 / 1280 *100%);
83  height: calc(250 / 600 *100%);
84  position: absolute;
85  top: 50%;
86  left: 50%;
87  -webkit-transform: translate(-50%, -50px);
88          transform: translate(-50%, -50px);
89  outline: 5px solid #1B224C;
90  outline-offset: -11px -16px -15px -16px;
91  margin: 0 auto;
92}
93
94@media screen and (min-width: 600px) and (max-width: 1179px) {
95  .intro-bg {
96    width: 90%;
97    margin: 0px 2vw;
98  }
99}
100
101@media screen and (max-width: 599px) {
102  .intro-bg {
103    width: 100%;
104    margin: 100px 0px;
105  }
106}
107
108.intro-bg-ttl {
109  font-size: 3.6rem;
110  font-weight: bold;
111  text-align: center;
112  padding: 32px;
113}
114
115@media screen and (min-width: 600px) and (max-width: 1179px) {
116  .intro-bg-ttl {
117    font-size: 4.3rem;
118  }
119}
120
121.intro-bg-ttl span {
122  text-decoration: underline;
123  -webkit-text-decoration-color: #F5A623;
124          text-decoration-color: #F5A623;
125  text-decoration-thickness: 10px;
126}
127
128.intro-bg-desc {
129  font-size: 1.8rem;
130  font-weight: bold;
131  text-align: center;
132}

css
1//general.css
2@charset "UTF-8";
3/* Color */
4/* body-Wrapper */
5.body-wrapper {
6  overflow: hidden;
7}
8
9html {
10  font-size: 62.5%;
11}
12
13body {
14  font-size: 1.6rem;
15}
16
17img {
18  width: 100%;
19  height: auto;
20  vertical-align: bottom;
21}
22
23a {
24  text-decoration: none;
25}
26
27li {
28  list-style: none;
29}
30
31/* section{
32    @include tb {
33        
34    }
35    @include sp{
36       
37    } 
38}
39*/
40.inner {
41  max-width: 900px;
42  margin: 0 auto;
43  -webkit-box-sizing: border-box;
44  box-sizing: border-box;
45}
46
47@media screen and (min-width: 600px) and (max-width: 1179px) {
48  .inner {
49    padding: 0 25px;
50  }
51}
52
53@media screen and (max-width: 599px) {
54  .inner {
55    padding: 0 15px;
56  }
57}
58
59.wrapper {
60  width: 100%;
61  margin: 0 auto;
62  /*  -webkit-box-sizing: content-box;
63    box-sizing: content-box; */
64}
65
66@media screen and (min-width: 600px) and (max-width: 1179px) {
67  .wrapper {
68    padding: 0px 20px;
69  }
70}
71
72@media screen and (max-width: 599px) {
73  .wrapper {
74    padding: 0 20px;
75  }
76}

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

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

回答1件

ベストアンサー

css
1img {
2  width: 100%;
3  height: auto;
4  vertical-align: bottom;
5}

この部分ですか？　ご提示のコードに img 要素がないのが原因だと思います。

コメントを受けて追記

.intro-bg が絶対配置されているのが原因です。
絶対配置されている子要素のサイズを、親要素のコンテンツサイズに含める方法は、CSSの範囲ではないです。絶対配置を諦めてください。

個人的には、絶対配置を使った中央寄せは筋が悪いと思っています。display: flex を使った中央寄せを試してみてはいかがでしょうか。

投稿2021/11/10 02:05

編集2021/11/11 01:17

Lhankor_Mhy

総合スコア36158

free_teku

2021/11/10 03:36

そうではないです！ intro-bg-color: navy; とwhiteの部分です

Lhankor_Mhy

2021/11/10 03:50

intro-bg-color: navy とはなんですか？

Lhankor_Mhy

2021/11/10 04:01

.intro-bg のことかな？そこには height: auto がなかったのですが、「height auto」とは height: auto のことではないのですか？そうだとすると、「height auto」とはなんですか？

free_teku

2021/11/10 09:58 編集

間違えました。.introのheight です。height autoは書かなくても、autoになるそうなので、書いていません。また、書いてもうまくいかないのも事実です. 上記には書きました。ご教授お願い致します。

free_teku

2021/11/11 06:16

Lhankor_Mhyさん、ご回答ありがとうございます。 bgに文字を配置する方法がposition absolute;を使った方法以外がわからず、使いました。 opacityを使って透過させる方法もなんか怪しいと思い、使いました。ほかにありますか？私は、画像や背景カラーなどの上に文字や画像を載せるときは、positionを使っていました。良いアイデアがありましたら、ご教授お願い致します。

Lhankor_Mhy

2021/11/11 06:26

ほかに原因はないと思います。

free_teku

2021/11/11 10:27

解決できました。ありがとうございます。

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

あなたの回答

tips

プレビュー

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

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

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

ただいまの回答率
85.46%

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

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

質問する

質問をすることでしか得られない、回答やアドバイスがある。

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

height autoが機能しない

前提・実現したいこと

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

試したこと

該当のソースコード

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

コメントを受けて追記

関連した質問