使包含img的div完全變高

Question

這個問題在網上已經問了很多。 但是每次嘗試都不成功

對於一個網站，我需要制作一個標題，我使用的是django +樣板（我認為這應該是樣板，因為我的代碼在js小提琴中的復制粘貼有效，而它不在本地）。

這是我使用的HTML：

<div id="topbar">
    <div id="networking">
        <div id="title">
            EasyMusik
        </div>
        <div id="logo">
            <img src="{% static "img/icons/myzik.svg" %}" />
        </div>
    </div>
</div>

這是CSS：

#topbar{
    display:block;
    background-color : #29A329;
    position: relative;
    float: top;
}
#tobbar div{
    height: 100%;
    display:inline-block;
}
#networking{
    padding-left:25%;
}
#networking div{
    display:inline-block;
}
#title{
    position: relative;
    height:100%;
    font-size: 24px;
}
#logo img{
    width:100%;
    display:block;
    float:left;
}
#logo{
    position: relative;
    height: 100%;
    padding-left:15px;
    background-color : #FF0000;
}

我得到了這個結果

我希望紅色區域充滿綠色區域。 我應該添加/刪除該屬性的哪個屬性？

編輯：終於設法得到一個小提琴： 在這里小提琴

Answer 1

給#topbar一個高度。 如果希望子容器的高度或寬度為100％，則父容器必須指定高度或寬度。 祝好運！

    #topbar{
        display:block;
        background-color : #29A329;
        position: relative;
        float: top;
        height: 200px
    }

Answer 2

這為我做了工作。 雖然它不是您的CSS。

CSS：

.parent
{
width:100%;
background-color:Green;
height:50px;
text-align:center;
font-size:24px;
}
.sub
{
width:50px;
background-color:Red;
height:50px;
display: inline-block;
}
.img
{
vertical-align:middle;
padding-top:15px;
}

HTML：

<div class="parent">
Easy Muzik
<div class="sub">
<img alt="" class="img" src="style/img.png" />
</div>
</div>