CSSにおいてボックスがはみ出る問題を解決したい

HTMLとCSSの勉強をしています。
以下のようなデザインなのですが、グレーの背景をグリーンのボックスがはみ出てしまうので、グレーの背景の底辺とグリーンのボックスの底辺を揃えたいです。そのためにはどうするのがいいでしょうか？

気になっているのが、mainクラスの高さがheaderクラスを含んでいるのに対して、
select_test_areaクラスはheaderクラスの高さを選んでいないため、差分が発生しています。
その原因を調べています。

恐れ入りますが、グレー背景にグリーンのボックスの底辺を合わせる方法がわかる方教えていただけますと幸いです。

html
1
2<!DOCTYPE html>
3  <html lang="ja">
4  <head>
5  <meta charset="utf-8" />
6  <link rel="stylesheet"  href="css/common.css">
7  <link rel="stylesheet"  href="css/home.css">
8  <title></title>
9  </head>
10  <body>
11    <header class="shadow">
12      <p class="logo"><span class="logo_light"></span></p>
13    </header>
14    <main>
15      <div class="select_test_area shadow">
16        <h2 class="font-YuGothic">TEST</h2>
17        <div class="wrapper">
18          <div class="test_notes font-hiragino">
19            <p class="title main_color">TEST</p>
20            <p class="ditale main_color">TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST</p>
21          </div>
22          <div class="test_list font-hiragino">
23            <ul>
24              <li class="main_color_back">
25                  <p class="title">TEST</p>
26              </li>
27              <li class="main_color_back">
28                  <p class="title">TEST</p>
29              </li>
30              <li class="main_color_back">
31                  <p class="title">TEST</p>
32              </li>
33              <li class="main_color_back">
34                  <p class="title">TEST</p>
35              </li>
36              <li class="main_color_back">
37                  <p class="title">TEST</p>
38              </li>
39              <li class="main_color_back">
40                  <p class="title">TEST</p>
41              </li>
42              <li class="main_color_back">
43                  <p class="title">TEST</p>
44              </li>
45              <li class="main_color_back">
46                  <p class="title">TEST</p>
47              </li>
48            </ul>
49  
50          </div>
51        </div>
52      </div>
53    </main>
54  
55  </body>
56  </html>

common.css

css
1         /*--------------------------------------------------------------
2           RESET
3        --------------------------------------------------------------*/
4        html{color:#000;background:#fff;height:100%}
5        body{height:100%}
6        body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td,figure{margin:0;padding:0}
7        table{border-collapse:collapse;border-spacing:0}
8        fieldset,img{border:0}
9        address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal}
10        ol,ul,li{list-style:none}
11        caption,th{text-align:left}
12        h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal}
13        q:before,q:after{content:''}
14        abbr,acronym{border:0;font-variant:normal}
15        sup{vertical-align:text-top}
16        sub{vertical-align:text-bottom}
17        input,textarea,select{font-size:inherit;font-weight:inherit;}
18        legend{color:#000}
19        *{zoom: 1; z-index: 0;}
20        img{vertical-align: bottom;}
21        :focus{outline:none;}
22        a { text-decoration: none; }
23        
24        button, input, select, textarea {
25          font-family : inherit;
26          font-size   : 100%;
27        }
28        
29        .clear { clear: left;}
30        .clearBoth { clear: both;}
31        
32        input[type="submit"]::-webkit-search-decoration,
33        input[type="button"]::-webkit-search-decoration {
34          display: none !important;
35        }
36        input[type="submit"],
37        input[type="button"] {
38          -webkit-box-sizing: content-box;
39          -webkit-appearance: button;
40          appearance: button;
41          box-sizing: border-box;
42          cursor: pointer;
43        }
44        
45        .main_color {
46          color: green;
47        }
48        
49        .main_color_back {
50          background-color: green;
51        }
52        
53        .shadow {
54          box-shadow: 0 3px 3px 0 rgba(0, 0, 0, .5);
55        }
56        
57        /*--------------------------------------------------------------
58            header
59        --------------------------------------------------------------*/
60        header {
61          width: 100%;
62          height: 70px;
63          background-color: #F2F2F2;
64          float: left;
65        }
66        
67        header img {
68          width: 50px;
69          float: left;
70        }
71        
72        header .logo {
73          float: left;
74          font-family: 'Oswald', sans-serif;
75          font-weight: bold;
76          color: #000;
77          font-size: 30px;
78        }
79        
80        header .logo_light {
81          font-weight: lighter;
82        }
83        
84        header a {
85          width: 150px;
86          height: 40px;
87          float: right;
88          text-align: center;
89          line-height: 40px;
90          margin-top: 15px;
91          margin-right: 30px;
92          background-color: #FFF;
93        	border-radius: 20px;
94        }
95        
96        /*--------------------------------------------------------------
97            Font
98        --------------------------------------------------------------*/
99        @import url('https://fonts.googleapis.com/css2?family=Oswald:wght@300;500;700&display=swap');
100        
101        .font-YuGothic {
102          font-family:"Yu Gothic Medium", "游ゴシック Medium", YuGothic, "游ゴシック体", "ヒラギノ角ゴ Pro W3", "メイリオ", sans-serif !important;
103        }
104        .font-hiragino {
105          font-family: 'Hiragino Kaku Gothic Pro', 'ヒラギノ角ゴ Pro W3', Meiryo, メイリオ, Osaka, 'MS PGothic', arial, helvetica, sans-serif;
106        }
107        
108        /*--------------------------------------------------------------
109            scrollbar
110        --------------------------------------------------------------*/
111        ::-webkit-scrollbar{
112          width: 10px;
113        }
114        ::-webkit-scrollbar-track{
115          background: #EFFCFF;
116          border: none;
117          border-radius: 10px;
118        }
119        ::-webkit-scrollbar-thumb{
120          background: green;
121          border-radius: 10px;
122          box-shadow: none;
123        }

home.css

    ```css

main {
width: 100%;
height: 100%;
background-color: #504d4d;
}

h2 {
  padding: 5%;
  color: #717171;
  font-size: 1.7vw;
  font-weight: bold;
}

.select_test_area {
  width: 32%;
  height: auto;
  max-height: 90%;
  margin: 15px 0 auto 20px;
  text-align: center;
  background-color: #FFF;
  float: left;
}

.select_test_area .wrapper {
  width: auto;
  max-height: 74vh;
  margin: auto;
      padding: 2%;
}

.test_notes {
  width: 80%;
  height: auto;
  margin: auto;
  padding: 5%;
  background-color: #EFFCFF;

}

.test_notes img {
  width: 50px;
  display:inline-block;
  vertical-align: middle;
}

.test_notes .title {
  width: 65%;
  text-align: left;
  font-size: 1.6vw;
  padding: 0 5%;
  display:inline-block;
  vertical-align: middle;
}

.test_notes .ditale {
  text-align: left;
  font-size: 1.2vw;
  margin: 10% 0;
}

.test_list {
  width: 83%;
  height: auto;
  max-height: 35.5vh;
  margin: auto;
  margin-bottom: 20px;
  background-color: #EFFCFF;
  overflow: scroll;
  overflow-x: hidden;
}
.test_list ul {
  border-bottom: 1% solid #376CA3;
}

.select_test_area li {
  text-align: left;
  padding: 1%;
  border-top: 1px solid #376CA3;
  border-right: 1px solid #376CA3;
  border-left: 1px solid #376CA3;
}
.test_list img {
  width: 4vh;
  padding: 0 1%;
  display:inline-block;
  vertical-align: middle;
}

.test_list .title {
  padding: 0 1%;
  font-size: 1.4vw;
  display:inline-block;
  vertical-align: middle;
  color: #FFF;
}

plasticgrammer

2021/01/15 23:02

確認ですが、wrapperの「max-height: 74vh;」の指定は必要なのでしょうか。

solMackartony

2021/01/16 04:46

緑のボックス部分を調整していたと思っていたのですが、少し私も理解しきれていないのでもしかしたらいらないかもしれないです。

solMackartony

2021/01/16 04:47

ご返答いただきありあがとうございます

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

回答1件

ベストアンサー

こんにちは。

main の子要素が全て float しているため、内容物がなくなり高さを失うのが原因です。
古典的にはいわゆる「clearfix」を使って解決していましたが、現在の環境であればブロック整形コンテキストを持たせるのが手っ取り早い解決法だと思います。

css
1main {
2    width: 100%;
3    height: 100%;
4    background-color: #504d4d;
5    display: flow-root; /* 追加 */
6}

投稿2021/01/16 01:37

Lhankor_Mhy

総合スコア36930

solMackartony

2021/01/16 04:45

ありがとおうございます！解決できました。参考までつけてくださりありがとうございます

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

あなたの回答

tips

プレビュー

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

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

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

ただいまの回答率
85.36%

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

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

質問する

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

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

CSSにおいてボックスがはみ出る問題を解決したい

関連した質問