子要素が親要素の高さいっぱいに広がらなくて困っています

子要素が親要素の高さいっぱいに広がらなくて困っています。
子要素に対してheight:100%を設定したのですが、効きません。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="css/test.css">
</head>
<body>
    <div class="inquiryArea__box__step__items">
        <dl class="inquiryArea__box__step__item">
<!-- 画像の赤い背景色の要素  -->
            <dt class="inquiryArea__box__step__item__ttl">
                物件種別
                <img src="img/index_ic08.png" alt="">
            </dt>
            <dd class="inquiryArea__box__step__item__list">
                <select name="" id="">
                    <option value="#">選択してください</option>
                </select>
                <span class="ok-icon">OK</span>
            </dd>
        </dl>
    </div>    

</body>
</html>

* { 
    margin: 0px; 
    padding: 0px;
    box-sizing: border-box; 
}
.inquiryArea__box__step__items{
    background-color: #EEEEEE;
    border-radius: 4px;
    padding: 10px 12px 10px 15px;
}
.inquiryArea__box__step__item__ttl{
    font-size: 10px;
    width: 60px;
    background-color: red;
    display: inline-block;
    text-align: center;
}
.inquiryArea__box__step__item img{
    display: block;
    margin: 0 auto;
}
.inquiryArea__box__step__item__list{
    background-color: yellow;
    display: inline-block;
}

kyoya0819

2019/09/06 12:01

どうでもいいけどlang属性がenなのが気になる

Silky

2019/09/06 12:06

ご指摘ありがとうございます。修正しました。

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

回答1件

ベストアンサー

下記のようになりました。
ポイントは line-height で高さを指定してしまうことと、 vertical-align を default の baseline ではなくすことかと思います。
44px; に一旦揃えましたが、デザインに合わせて適宜変更してください

css
1.inquiryArea__box__step__item__ttl{
2    font-size: 10px;
3    width: 60px;
4    line-height: 44px;  /* line-height で高さを設定しつつ文字を中央揃え*/
5    background-color: red;
6    display: inline-block;
7    text-align: center;
8    vertical-align: bottom; /* default の baseline だと、inline-block 同士でずれることがある */
9}
10.inquiryArea__box__step__item img{
11    display: block;
12    margin: 0 auto;
13}
14.inquiryArea__box__step__item__list{
15    background-color: yellow;
16    display: inline-block;
17    line-height: 44px;  /* line-height で高さを設定しつつ文字を中央揃え*/
18    vertical-align: bottom; /* default の baseline だと、inline-block 同士でずれることがある */
19}

投稿2019/09/06 13:44

unhappychoice

総合スコア1531

Silky

2019/09/08 03:51

修正いただきありがとうございました！おかげさまで問題解決いたしました。 inline-block 同士でずれることがあることがあるのはdefaultがbaselineだからということを学びました。問題が特定できず、うまく検索をして解決することができませんでした。。 vertical-alignプロパティのtopかbottomを指定することで解決できるのですね！ http://memorandum-plus.com/2018/04/04/css-%E3%82%A4%E3%83%B3%E3%83%A9%E3%82%A4%E3%83%B3%E3%83%96%E3%83%AD%E3%83%83%E3%82%AF%E3%82%92%E4%B8%A6%E3%81%B9%E3%81%A6%E7%94%BB%E5%83%8F%E3%82%92%E8%A1%A8%E7%A4%BA%E3%81%99%E3%82%8B%E3%81%A8/ 今はキーワードをいただいたので、検索でより理解を深めたいと思います。

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